ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / flex точная ширина
2 сообщений из 2, страница 1 из 1
flex точная ширина
    #39024435
doomek
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
doomek
Гость
есть структура типа:
[HTML]<div>
<div class = "1"></div>
<div class = "2"></div>
</div>
[/HTML]
нужно чтобы div class 2 был вширину 10px, а div class 1 растягивался в полную ширину их общего контейнера причем находились они на одной строке и если class 2 присутствует то class 1 "уступал" ему место и сжимался на 10 пикселей, а если отсутствует то был растянут на всю ширину.

сделал с помощью display flex для общего контейнера и все хорошо только теперь div class 2 не имеет точной ширины а это нужно. как поступть в этом случае?
...
Рейтинг: 0 / 0
06.08.2015, 15:38
| Ответить | Цитировать | Написать  
flex точная ширина
    #39024526
Gwa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gwa
Участник
doomek,
вот такой вариант через LESS,
но все ширины нужно задавать в % или в px

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<html> 
  <head> 
    <script src="jquery-2.1.3.js"></script> 
	<link rel="stylesheet/less" type="text/css" href="DivDiv.less">
    <script src="less.min.js" type="text/javascript"></script>

  </head> 
  <body> 
     <div id="container">
     <div id="one"> </div>
     <div id="two"> </div>
	 </div>
  </body> 
</html>



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
@allH:20px;

/*
@containerW: 800px;
@oneW:10px;
*/

@containerW: 100%;
@oneW:2%;

#container
  {
 height: @allH;
 width: @containerW;
 border: 1px solid black; 
  }

#one
 {
 background:yellow;
 height: @allH;
 width: @oneW;
 float: left;
 } 
#two
 {
 background:lightgreen;
 height: @allH;
 width: @containerW - @oneW;
 float: left;
 }
...
Рейтинг: 0 / 0
06.08.2015, 17:04
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / flex точная ширина
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=68&tid=1445803]:
 0ms
get settings:
 7ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 56ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 26ms
get tp. blocked users:
 1ms
others: 209ms
total:  322ms
созд. / загр.: 322ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]