Вопрос: Сетка ящиков без внешней границы, но со всеми внутренними границами


Эффект, который я собираюсь сделать:

enter image description here

Я использую цикл foreach для отображения div в этом элементе контейнера. Быстро и грязно было бы делать индекс% 4 (или что-то вроде числа divs-per-row) и стиль соответственно, но я ищу подход css-only, если он есть.

Одна вещь, с которой я сейчас играю, - это применить белую рамку к элементу контейнера с отрицательными полями, чтобы скрыть границы внешних div ... какие существуют другие альтернативы?

EDIT: Я пытаюсь использовать метод «Белая граница вокруг контейнера», но он не работает, потому что я плаваю слева от него (для отзывчивости) - так как белая граница элемента контейнера перекрывает черную границу div, div переходит к следующей строке.


4


источник


Ответы:


У меня есть два ответа, чтобы вы могли рассмотреть ... Первый - это чистый CSS, как вы просили, а второй использует небольшое количество php вместе с css. Как правило, чистые решения css желательны, но в зависимости от ситуации второе решение может иметь некоторые преимущества.

Итак, прежде всего, css. Вы были точно на правильном пути с внешней границей, покрывающей границы div. Я немного адаптировал ваш подход. Вместо того, чтобы помещать эту границу в родительский элемент, я создал дополнительный ребенок (в этом случае пробел) и позиционировал его абсолютно внутри родителя, чтобы охватить всю ширину и высоту. Я помещаю эту границу вместо родителя, и поскольку она абсолютно позиционирована, она не мешает позиционированию других элементов.

Также, box-sizing: border-box; может пригодиться, если у вас возникли проблемы с границами, нарушающими макет. Я использовал это в своих примерах.

Вот демонстрация этого подхода:

http://jsfiddle.net/PGygr/


Что касается второго решения, я использовал несколько более продвинутых селекторов, чтобы переопределить определенные границы в определенных ячейках. Таким образом, они не просто скрыты. На самом деле их нет. По этой причине я предпочел бы использовать это решение по первому, но это только мое мнение.

Во-первых, я устанавливаю границу справа и снизу на всех div. Это будет правильно для всех div, за исключением последней из каждой строки, и всех из них в нижней строке.

Чтобы выбрать последний div в каждой строке, чтобы отменить его правую боковую границу, я могу сделать что-то вроде этого:

.container div:nth-child(Xn) {
    border-right: none;
}

Где «X» будет заменено числом div в каждой строке. Если я сделаю это со встроенными стилями, я могу использовать php для динамического размещения этого числа.

Чтобы выбрать и деактивировать нижние границы для последней строки, я могу сделать что-то вроде этого:

.container div:nth-child(X) ~ div {
    border-bottom: none;
}

Опять же, «X» будет помещен в php и будет равен числу div в каждой строке, умноженному на количество строк, минус единица. Итак, в основном, выберите все div, которые появляются после последнего div во второй последней строке.

Вот скрипка, чтобы продемонстрировать, минус ее php-аспект (я вручную ввел числа в css)

http://jsfiddle.net/t7atH/

Независимо от того, решите ли вы придерживаться подхода css или попробуйте добавить немного php, я надеюсь, что это вам поможет. Удачи!

ОБНОВИТЬ:  как задумка, есть третье решение, которое я, вероятно, должен добавить. Если вы можете добавить элементы строки, обтекающие div, вы можете использовать :first-child а также :last-child чтобы отключить ваши границы.

Я думаю, это довольно понятно, поэтому просто взгляните на код:

http://jsfiddle.net/PGygr/3/


6



Мне нужно решение одной и той же проблемы и первое решение Блейка - спасибо!

Тем не менее, я решил сделать это несколько иначе ... вместо добавления дополнительного элемента в разметку я использовал псевдоэлемент CSS.

.container:before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid #eee;
}

http://jsfiddle.net/Avc2v/


2



Я смотрю на все решение, и я нашел его лучшим. Потому что он отзывчив. Поэтому я немного отредактировал, что он выглядит и работает намного лучше ...

Как это работает?

Мы делаем добавление псевдо-класса с пустым содержимым с шириной 1px и высотой 1px вверху и слева от контейнера div [с надписью «.border-override»].

Примечание. Это решение совсем не отличается от того, что находится на верхней части страницы, крошечная разница в том, что на верхней части страницы появляются ошибки при использовании для разделов различной ширины и разного порядка на экранах различной ширины. [Спасибо за ответ на верхнюю страницу, но, используя PHP и CSS, это похоже на попытку таблицы жесткого кода! Если вы знаете последнюю строку и последний столбец, вы как бы рисуете таблицу, поэтому лучше используйте таблицу, чем суматоху div ...]

скрипка

<style>
.border-override {
background: white;
position: relative;
}
.border-override::before {
position:absolute;
height:1px;
width:100%;
top:-1px;
left:0;
background-color: white;
border:1px solid white;
z-index:100;
content: ' ';
}
.border-override::after {
position:absolute;
width:1px;
height:100%;
top:0;
left:-1px;
background-color: white;
border:1px solid white;
z-index:100;
content: ' ';
}
.border-override div {
width: 100px;
height: 50px;
border-top: 1px solid blue;
border-left: 1px solid blue;  
float:left;
position:relative;
z-index:1;
}
</style>

<div class="border-override">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>  
</div>

1