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

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

Естественно, простым и разумным решением является определить у элементов верхний и нижний margins, скажем, в 3px, а верхний и нижний paddings родителя уменьшить на эти самые 3px, тогда визуально все встанет как хочется. Но вот засела задачка - а все-таки, можно ли это сделать без переопределения стиля родителя? Спасибо за совет.
...
Рейтинг: 0 / 0
Можно ли сделать желаемое средствами CSS?
    #38026196
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
IDVsbruck , что-то не совсем понял что нужно... На картинках чёле покажи. Одной явно мало...
Типа "если так, то так, а если эдак, то вот как".
...
Рейтинг: 0 / 0
Можно ли сделать желаемое средствами CSS?
    #38026201
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
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
Можно ли сделать желаемое средствами CSS?
    #38026391
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa, +1
Достаточно же margin-top, у первого элемента он же схлопывается, известный факт :)
...
Рейтинг: 0 / 0
Можно ли сделать желаемое средствами CSS?
    #38026398
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Можно ли сделать желаемое средствами CSS?
    #38026415
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANA,
+1 за наводку на статью.
Не знал этого (правда, по-серьезному и не верстаю).
...
Рейтинг: 0 / 0
Можно ли сделать желаемое средствами CSS?
    #38026741
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Нет, схлопывание - это не для моего случая.

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


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