Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / flex точная ширина / 2 сообщений из 2, страница 1 из 1
06.08.2015, 15:38
    #39024435
doomek
doomek
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
flex точная ширина
есть структура типа:
[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, 17:04
    #39024526
Gwa
Gwa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
flex точная ширина
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / flex точная ширина / 2 сообщений из 2, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 297ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445803]:
 0ms
get settings:
 6ms
get forum list:
 14ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 21ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 34ms
get tp. blocked users:
 1ms
others: 207ms
total:  297ms
x
x
Закрыть


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