Блог

Главная - Вопросы по программированию - CSS — создайте «стену» из разделов без пробелов между ними

CSS — создайте «стену» из разделов без пробелов между ними

#html #css #responsive-design #styles

#HTML #css — код #адаптивный дизайн #стили

Вопрос:

то, что я пытаюсь сделать, это прикрепить divs один к другому, чтобы создать из них стену.

Проблема в том, что на самом деле они выглядят действительно не приклеенными друг к другу, как вы можете видеть в моей попытке: http://jsfiddle.net/w3htK/2 /

Я пробовал использовать float:left; , но на самом деле не помогло

Я бы хотел, чтобы конечный результат был примерно таким:

введите описание изображения здесь

Таким образом , независимо от размера содержимого каждый div приклеивается к предыдущему без пробелов между ними

У вас есть какие-либо подсказки?

Комментарии:

1. Зачем изобретать велосипед заново? Если вы ищете адаптивную сетку, попробуйте bootstrap grid getbootstrap.com/examples/grid или skeleton.js getskeleton.com и т.д.

2. @geedubb во-первых, я уже использую фреймворк css, который не является проблемой проблема в том, как получить divs без пустых желобов и прикрепить один к другому, не заботясь о длине содержимого, вы проверили мой пример?

3. То, что вы пытаетесь сделать, невозможно только с помощью CSS. Вам нужен пакет JavaScript, такой как Isotope / Masonry, см.: isotope.metafizzy.co/layout-modes/masonry.html

Ответ №1:

Во-первых, в вашем jsfiddle есть дополнительный закрывающий тег div после светло-зеленого деления. Возможно, это должно закрыть .подразделение foo.

Во-вторых, чтобы сделать стек divs, как показано на вашем скриншоте, вы можете переместить второй div вправо, добавив следующий набор правил:

 .foo div:nth-of-type(2) {
    float: right;
}

Комментарии:

1. какое классное правило, которого я не знал!! спасибо, и, похоже, он поддерживается во всех браузерах, кроме IE <= 8, и он, конечно, работает jsfiddle.net/w3htK/8

2. Для IE 8 и ниже вам нужно использовать прокладку. html5polyfill.com это довольно хорошая база данных, в которой перечислены различные полифиллы, включая selectivizr, который реализует селекторы CSS3.

Ответ №2:

Можете ли вы попробовать заменить свой CSS на:

 div.foo {
    float:left;
    max-width:50%;
    min-width:30%;
}

Комментарии:

1. эй, на самом деле действительно хорошее решение, позвольте мне кое-что проверить на вашем примере, я думаю, что приму ваш ответ, если все сработает: P спасибо

Ответ №3:

Я думаю, вы хотите, чтобы дивы касались друг друга по вертикали?

Для этого вы можете использовать столбцы CSS http://davidwalsh.name/css-columns

Метки: