Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Можно ли сделать желаемое средствами CSS? / 9 сообщений из 9, страница 1 из 1
06.11.2012, 05:50:44
    #38026143
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
Возникла одна мелочь, достаточно простая при анализе и последующем "тюнинге" элементов, но захотелось решить задачку исключительно средствами CSS. Может, кто поможет ...

Есть контейнер верхнего уровня - А, в котором находятся контейнеры В и С, которые по ширине занимают всю ширину А, а высота определяется содержимым и с четко заданным padding.
В эти контейнеры добавляются элементы одинаковой высоты и плавающей ширины с display:inline-block.
Если в контейнере (В или С) одна "строка" из элементов, то хотелось бы, чтобы у них не было вертикальных margins (как в В), если 2 и больше - чтобы появлялся верхний margin (то есть низлежащие располагались ниже с отступом, как в С).

Естественно, простым и разумным решением является определить у элементов верхний и нижний margins, скажем, в 3px, а верхний и нижний paddings родителя уменьшить на эти самые 3px, тогда визуально все встанет как хочется. Но вот засела задачка - а все-таки, можно ли это сделать без переопределения стиля родителя? Спасибо за совет.
...
Рейтинг: 0 / 0
06.11.2012, 08:33:55
    #38026196
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
IDVsbruck , что-то не совсем понял что нужно... На картинках чёле покажи. Одной явно мало...
Типа "если так, то так, а если эдак, то вот как".
...
Рейтинг: 0 / 0
06.11.2012, 08:47:39
    #38026201
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
IDVsbruck , если правильно тебя понял...

Код: html
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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#a {
	width: 200px;
	border: 1px solid;
	padding: 5px;
}
#b,
#c {
	background-color: gray;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
}
#b {
	margin-bottom: 5px;
}
.box {
	border: 1px solid;
	height: 30px;
	display: inline-block;
	background-color: #ffffff;
	margin-top:5px;
}
#d {
	width: 30%;
}
#e {
	width: 30%;
}
#f {
	width: 50%;
}
#g {
	width: 60%;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='a'>
	<div id='b'>
		<div id='d' class='box'>d</div>
	</div>
	<div id='c'>
		<div id='e' class='box'>e</div>
		<div id='f' class='box'>f</div>
		<div id='g' class='box'>g</div>
	</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
06.11.2012, 11:07:24
    #38026391
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
krvsa, +1
Достаточно же margin-top, у первого элемента он же схлопывается, известный факт :)
...
Рейтинг: 0 / 0
06.11.2012, 11:13:55
    #38026398
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
...
Рейтинг: 0 / 0
06.11.2012, 11:22:09
    #38026415
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
skyANA,
+1 за наводку на статью.
Не знал этого (правда, по-серьезному и не верстаю).
...
Рейтинг: 0 / 0
06.11.2012, 13:57:38
    #38026741
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
Нет, схлопывание - это не для моего случая.

Повторюсь: наполняю контейнер с padding:5рх множеством элементов с display:inline-block и border, но с плавающей шириной, поэтому они не ограничены количеством по ширине, из-за чего происходит перенос на следующие строки. Поэтому из может быть в одной строке 2, 3, 8 и т.д. И мне бы хотелось, чтобы те, которы переносятся в следующие строки, имели вертикальный отступ от предыдущей строки.
...
Рейтинг: 0 / 0
06.11.2012, 15:42:50
    #38026998
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
IDVsbruck , тогда ждем от тебя твой тестовый пример... Поскольку я повторил в точности твой рисунок.
...
Рейтинг: 0 / 0
06.11.2012, 18:38:38
    #38027354
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Можно ли сделать желаемое средствами CSS?
Ладно, не поняли или не смог доходчиво объяснить, проехали. Спасибо. Переопределил родителя.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Можно ли сделать желаемое средствами CSS? / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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