CSS встроенный блок чистый складной

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

Желаемый эффект:

|----|----| 
|1111|2222| 
|1111|----| 
|1111|3333| 
|----|----| 
|4444| 
|----|

Фактический результат:

|----|----| 
|1111|2222| 
|1111|----| 
|1111| 
|----|----| 
|3333|4444| 
|----|----|

.wrapper { 
 
    background-color:red; 
 
    width:220px; 
 
} 
 

 
.block { 
 
    background-color:blue; 
 
    height:100px; 
 
    width:100px; 
 
    
 
    display:inline-block; 
 
    vertical-align:top; 
 
    margin:4px; 
 
} 
 

 
.long { 
 
    height:200px; 
 
}

<div class="wrapper"> 
 
    <div class="block long"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
</div>

источник

2016-10-19 Randy

Это кладка макет - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css –

Что значит «чистый складной «означает здесь? – BSMP

@Paulie_D Не совсем, я хотел бы, чтобы число 4 занимало пространство, где 5 приведен в примере. – Randy

Я думаю, что лучшим вариантом является использование masonry плагин.

$('.wrapper').masonry({ 
 
    columnWidth: 1, 
 
    itemSelector: '.block' 
 
});

.wrapper { 
 
    background-color:red; 
 
    width:220px; 
 
} 
 

 
.block { 
 
    background-color:blue; 
 
    height:100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
    margin:4px; 
 
} 
 

 
.long { 
 
    height:180px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="block long"></div><div class="block"></div><div class="block"></div><div class="block"></div> 
 
</div>

источник

2016-10-19 14:43:59

<div class="wrapper"> 
    <div> 
    <div class="block long"> 

    </div> 
    <div class="block"> 
    </div> 
    </div> 
    <div> 
    <div class="block"> 
    </div> 
    <div class="block"> 
    </div> 
    </div> 
</div>

это будет иметь желаемый эффект с тем же CSS

источник

2016-10-19 14:33:11

Это ничего не меняет, я боюсь. – Randy

загрузите плункер и запустите его. вы увидите, что элементы правильно выровнены. https://plnkr.co/edit/S5OTUrAM5ESrF7sgGdQ2?p=info –

Вы можете добавить к .wrapper класса,

column-count: 2; 
column-gap: 0px;

.wrapper { 
 
    background-color:red; 
 
    width:220px; 
 
    column-count: 2; 
 
    column-gap: 0px; 
 
} 
 

 
.block { 
 
    background-color:blue; 
 
    height:100px; 
 
    width:100px; 
 
    
 
    display:inline-block; 
 
    vertical-align:top; 
 
    margin:4px; 
 
} 
 

 
.long { 
 
    height:200px; 
 
}

<div class="wrapper"> 
 
    <div class="block long"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
</div>

источник

2016-10-19 14:36:13

В этом примере это блестящий результат, но, к сожалению, он взорвал весь мой макет в реальном проекте. Я нахожусь в отладочном туре сейчас;) – Randy

Это не будет требовать разделов по мере необходимости. –

использования float:left блокировать свойства

.wrapper { 
 
    background-color:red; 
 
display: inline-block; 
 
width: 220px; 
 
} 
 

 
.block { 
 
    background-color:blue; 
 
    height:100px; 
 
    width:100px; 
 
float: left; 
 
    
 
vertical-align:top; 
 
    margin:4px; 
 
} 
 

 
.long { 
 
    height:200px; 
 
}

<div class="wrapper"> 
 
    <div class="block long"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
    <div class="block"> 
 
    </div> 
 
</div>

источник

2016-10-19 14:36:48

Это работает для моего примера, но тогда, если у вас будет больше элементов, то будет пустое место слева, а не справа;) – Randy

CSS встроенный блок чистый складной

ответ

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