Я использую сетку 960.gs для дизайна. Как лучше всего добавить тонкую разделительную вертикальную линию между двумя блоками? Ширина и цвет должны регулироваться.
Мой план состоит в том, чтобы определить пару классов div с абсолютными позициями и цветом фона, по одному для каждой возможной позиции, и использовать JQuery, чтобы убедиться, что он имеет ту же высоту, что и окружающие блоки. Хотя это кажется немного сложным. Есть ли лучшее решение?
Вы можете реализовать границу, используя псевдоселектор :after и абсолютное позиционирование, например:
.line:after {
border-right: 1px solid #000000;
content: "";
display: block;
margin: 1px;
position: absolute;
right: -11px;
top: 0;
bottom: 0;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
position:relative;
}
Вот демонстрация http://jsfiddle.net/andresilich/ZTyf4/show/.
Изменить здесь http://jsfiddle.net/andresilich/ZTyf4/
Если вы не хотите, чтобы разделительная линия меняла положение следующей строки DIV, я думаю, что абсолютное позиционирование — ваш лучший выбор. Что вы можете сделать, так это использовать абсолютно позиционированный селектор :after, чтобы расположить что-то относительно нижней части поля, но не повлиять на макет. Это работает для меня, чтобы разместить линию между блоками, не влияя на макет, просто измените значения последних четырех свойств по мере необходимости:
#topbox:after {
content: "";
display: block;
position: absolute;
margin-top: 25px;
height: 5px;
width: 400px;
background-color: #999;
}
Я думаю, что это можно сделать без jQuery. Основная проблема заключается в учете переменной высоты элементов.
ссылка здесь: http://jsfiddle.net/uqZgt/1/
HTML:
<div class="container">
<div class="box-1">
This box has alot of content. This box has alot of content. This box has alot of content.
</div>
<div class="box-2">
This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content.
</div>
</div>
CSS:
.container {
width: 242px;
}
.container div {
width: 100px;
background: #ff0000;
float: left;
padding: 10px;
border-right: 2px solid #000
}
.box-1 + .box-2 {
border-right: none;
border-left: 2px solid #000
}
.box-1 ~ .box-2 {
margin-left: -2px
}
в этом примере все div в div .container имеют сплошную черную рамку шириной 2 пикселя справа. Однако элемент с классом box-2, который непосредственно следует за элементом с .box-1, будет иметь сплошную черную границу слева толщиной 2 пикселя и границу справа нет. Пока это создает границу в 3 пикселя между двумя элементами.
Теперь .box-1 ~ .box-2 выбирает любой .box-1, который непосредственно предшествует .box-2, и устанавливает для его левого поля значение -2px. Это перетащит его на два пикселя влево, что фактически приведет к перекрытию границ обоих элементов.
Ширина блока .container равна сумме ширины двух элементов (200 пикселей) плюс отступы (по 10 пикселей справа и слева = 20 пикселей) плюс ширина одной границы (2 пикселя). 242px, поэтому два элемента идеально подходят друг другу.
Независимо от того, какой элемент div содержит больше содержимого, граница будет охватывать высоту элемента div с наибольшим содержанием.
~ раньше.
- person Andreas; 19.01.2012
Я может быть не понимаю вашей проблемы. Я бы, вероятно, просто использовал правую или левую границу на одном из столбцов и отрегулировал отступ, чтобы убедиться, что он находится по центру между 2.
