начальной загрузки сетки макета оленья кожа организовать DIV запуск из строки

У меня есть 4 DIV следующим образом:начальной загрузки сетки макета оленья кожа организовать DIV запуск из строки

<div class="col-xs-4" > 
div1 
</div> 

<div class="col-xs-4" > 
div2 
</div> 

<div class="col-xs-4" > 
div3 
</div> 

<div class="col-xs-4" > 
div4 
</div>

Почему 4-й DIV пришел ниже DIV 3 вместо ниже DIV 1.

Как Могу ли я изменить свой код, чтобы любой div после последнего div строки начинал появляться после начала следующей строки?

источник

2017-01-05 Ayan

Это из-за проблемы высоты, может вам нужно использовать для кладки плагинов –

вы можете добавить первые 3 DIV в строке, а следующий в другом ряду, его будет иметь вопрос на расстоянии или вы можете использовать кладку, как @Naila сказал –

Возможно, эта статья поможет вам: http://w3bits.com/css-masonry/ –

сделать дополнительные row:

<div class="row"> 
    <div class="col-xs-4" > 
    div1 
    </div> 
    <div class="col-xs-4" > 
    div2 
    </div> 
    <div class="col-xs-4" > 
    div3 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-4" > 
    div4 
    </div> 
</div>

row не позволяет позиционирован относительно элементов из другого ряда, чтобы перекрывать его содержание, таким образом 4-ый DIV будет размещен ниже, и ее верхний край будет находиться ниже дна край самого высокого div первой строки.

источник

2017-01-05 10:30:49 Banzay

-1

Вы сделали ошибку. В строке у вас всего 12 колоний, но ваше общее добавление - 16 (col-xs-4 * 4). Или измените col-xs-4 на col-xs-3 или создайте новую строку.

источник

2017-01-05 10:35:15 siriusB

Ваш html-код правильный, если используется boostrap. Я думаю, что проблемы - это height и width вопрос. Я предложил использовать height and width стиль для Div.

Используйте ниже свойство стиля CSS для его разрешения.

width, height, max-width, min-width, max-height and min-height

Попробуйте что-нибудь подобное.

<div class="row"> 
    <div class="col-xs-4" > 
     <div class="content">div1</div> 
    </div> 

    <div class="col-xs-4" > 
    <div class="content">div2</div> 
    </div> 

    <div class="col-xs-4" > 
    <div class="content">div3</div> 
    </div> 

    <div class="col-xs-4" > 
    <div class="content">div4</div> 
    </div> 
    </div>

источник

2017-01-05 10:36:12

Вы должны были бы кладки плагин для того, чтобы дивы сидеть, как вы хотите, вот ссылка на него: Masonry. Разная высота divs вытолкнет их из потока, и вы увидите, что они не появляются там, где вы хотите. Также с Boostrap столбцы в любой заданной строке должны быть меньше или равны 12. В вашей строке они равны 16 и попадают в следующее доступное пространство, которое они могут найти.

Структура вашего HTML должна быть:

Если вы хотите, чтобы все колонки имеют одинаковую высоту, я предложил бы использовать макет Flexbox:

.row-flex, .row-flex > div[class*='col-'] { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex:1 1 auto; 
} 

.row-flex-wrap { 
    -webkit-flex-flow: row wrap; 
    align-content: flex-start; 
    flex:0; 
}

Поскольку все ваши дивы имеют различные высоты (согласно вашей картине) вам будет лучше с плацдармом кладки.

источник

2017-01-05 10:37:23

место все <div class="col-xs-4"></div> в структуре ряда <div class="row"></div>

вот пример:

<div class="row"> 
    <div class="col-xs-4" > 
    div1 
    </div> 
    <div class="col-xs-4" > 
    div2 
    </div> 
    <div class="col-xs-4" > 
    div3 
    </div> 
    <div class="col-xs-4" > 
    div4 
    </div> 
    </div>

я думаю, вы хотите

кладка Галерея изображений

эффект, пожалуйста, проверьте ниже URL для точных эффектов

http://bootsnipp.com/snippets/featured/masonry-image-gallery

источник

2017-01-05 11:21:22

начальной загрузки сетки макета оленья кожа организовать DIV запуск из строки

ответ

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