CSS две колонки с известной дочерней шириной

Question

Я создаю некоторый код для отображения поля с разной высотой (высота будет из изображений внутри).

В этом примере отлично работает: http://jsfiddle.net/GSnfG/

... но когда я редактируюнекоторая высота (в будущем - высота изображения), здесь: поле 3 установлено на высоту 100px , результаты не работают.

Как подготовить код CSS для создания чего-то вроде двух столбцов?

Я не могу использовать таблицы, также я не хочу использовать jquery или другие js Это возможно?

Answer 1

Нет, это невозможно в общем случае без JavaScript или языка на стороне сервера.

В некоторых случаях вы можете добавить оболочку div s для каждогоотдельный столбец, но некоторые комбинации размера элемента будут выглядеть плохо, например: http://jsfiddle.net/suaaK/3/ - в этой демонстрации, вероятно, было бы лучше, если бы Box 6 был под Box 3. Чем больше (и больше по размеру)чем больше элементов, тем больше неровностей могут стать столбцы.

См. в этом ответе сравнение подходящих методов, показы того, что они не работают, а также показ клиентской части решения, включающего серверкод стороны:

• CSS с плавающей точкой на переменной высоте

Если вы хотите использовать JavaScript + jQuery, вам следует использовать jQuery Masonry .

Существует также сырая версия JavaScript: Ванильное масонство

Демоверсии:

• http://desandro.com/demo/masonry/docs/filtering.html
• http://desandro.com/demo/masonry/docs/animating-jquery.html
• http://desandro.com/demo/masonry/docs/appending.html

Answer 2

Я привел пример через jFiddle для одного возможного решения

Сначала создайте два столбца, один для левых блоков и один для правых.См. Ниже.

Если вас беспокоит ваша ширина box-container, просто добавьте .box-container {width:105px} к вашему CSS.

 <div class="container">
        <div class="left box-container">
            <div class="box" style="height:60px;">1</div>

            <div class="box" style="height:100px;">2</div>

            <div class="box" style="height:60px;">3</div>

        </div><!-- left-box-container -->

        <div class="right box-container">
            <div class="box" style="height:30px;">1</div>

            <div class="box" style="height:200px;">2</div>

            <div class="box" style="height:60px;">3</div>

        </div><!-- right-box-container -->

    </div>

Answer 3

Если вы хотите, чтобы столбцы имели одинаковую высоту, то есть, добавьте div, которые меньше, чем их соседи, вы можете изменить css на что-то вроде этого:

.box {background:#20abff; color:#fff; width: 5px; margin: 5px;}
.left {float:left;}
.right {float:left;}
.container {width:200px;}

Еще одна вещь, которую вы можете сделать, это создать псевдотаблицы с помощью divs.

.Table_Wrapper { width: 400px; }
.Table_Row { width: 98%; padding: 1%;float: left; } 


<div class="Table_Wrapper">
    <div class="Table_Row">
        <div class="box left" style="height:60px;">1</div>
        <div class="box right" style="height:80px;">2</div>
    </div>
    <div class="Table_Row">
        <div class="box left" style="height:60px;">3</div>
        <div class="box right" style="height:60px;">4</div>
    </div>
    <div class="Table_Row">
        <div class="box left" style="height:60px;">5</div>
        <div class="box right" style="height:60px;">6</div>
    </div>
</div>

JSFiddle