Дисплей Div с использованием встроенного блока

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

То же самое ниже:

<style> 

*{ 
    margin:0px; 
    padding:0px; 
} 
.changed{ 
    display:inline-block; 
    vertical-align:top; 
} 


</style> 
</head> 

<body> 
<div style="border:1px solid #F00; width:900px; min-height:1000px"> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:20px;"></div> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:37px;"></div> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div> 


</div>

Если вы видите второй ДИВ в первом ряду мал, поэтому пятый один (второй ряд второй) один должен придумать, но полная вторая строка начинается с одной и той же вертикальной линии. Вот изображение, которое я пытаюсь получить.

http://i39.tinypic.com/22hjlg.png

Заранее спасибо

источник

2013-05-23 Ram

Что вы пытаетесь сделать, это не представляется возможным только с помощью CSS.

Эта картина, которую вы показываете, предназначена для масонства плагинов. http://masonry.desandro.com/

источник

2013-05-23 14:48:10 cjd82187

На самом деле сейчас это [изотоп] (http://isotope.metafizzy.co/) –

Интересно, я только что посмотрел изотопа. Они написаны одним и тем же лицом и имеют сходные черты. Изотоп способен немного больше, но он не является бесплатным для коммерческого использования в соответствии с сайтом. Вот статья переполнения стека, объясняющая разницу немного более подробно http://stackoverflow.com/questions/8856893/difference-between-isotope-and-masonry-jquery-plugins – cjd82187

@ cjd82187 Спасибо, я чувствую, что это работает. Спасибо за ваш быстрый ответ. – Ram

Если вы не возражаете переупорядочивать divs, вы можете достичь такого макета, объединив каждый столбец в свой собственный div. Добавьте float:left на столбах и удалите display:inline-block из внутренних div. Что-то вроде этого:

<div style="border:1px solid #F00; width:900px; min-height:1000px"> 
    <div style="float:left"> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div> 
     <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div></div> 
    <div style="float:left"> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:20px;"></div> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:37px;"></div></div> 
    <div style="float:left"> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div> 
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div> 
    </div> 
</div>

Я не уверен, если это отвечает вашим потребностям, так как он не использует встроенные дивы, и дивы должны быть отсортированы по колонке. Но если вы действительно заботитесь о том, чтобы получить что-то похожее на ваш образ, это сработает.

источник

2013-05-23 15:00:27

спасибо за ответ. На самом деле это происходит динамично. Я пытаюсь отобразить страницу сообщений Wordpress в 3 столбцах. Поэтому, когда каждый пост имеет разный размер, возникают проблемы. – Ram

Я думаю, что упорядочение вашего макета с помощью столбцов должно сделать трюк.

<div class="column"> 
    <!-- your content here --> 
</div>

с попутным CSS:

.column { display: inline-block; width: 100px; vertical-align: top; }

Обновлено скрипку здесь: http://jsfiddle.net/b5d3s/3/

источник

2013-05-23 16:50:20 RoyalLys

Дисплей Div с использованием встроенного блока

ответ

Смежные вопросы