Ответственные столбцы div, где элементы столбца меняются на размер экрана

У меня есть три столбца с именем <div class="pageColumnOneThird">.Ответственные столбцы div, где элементы столбца меняются на размер экрана

Внутри каждого столбца Принести изображения и сообщения с помощью PHP, где новый элемент получает помещается в top left column и следующий в top middle column и третий в top right column прежде чем она восходит к left column снова.

Теперь я пытаюсь сделать это отзывчивым, так что, когда отображаются два столбца, меняется расположение каждого изображения/сообщения.

пример: Когда есть только две колонки бок о бок мне нужно первый ряд элементов, чтобы быть элементом 1 и 2. Затем вторая строка должна быть элементом 3 и 4.

Is есть ли способ сделать это с помощью CSS?

Если нет, есть ли быстрый код jQuery, который может сделать это для меня?

Код

<!-- FIRST COLUMN --> 
<div class="pageColumnOneThird"> 
    <div class="itemWrap">Element 1</div> 
    <div class="itemWrap">Element 4</div> 
    <div class="itemWrap">Element 7</div> 
</div> 
<!-- SECOND COLUMN --> 
<div class="pageColumnOneThird"> 
    <div class="itemWrap">Element 2</div> 
    <div class="itemWrap">Element 5</div> 
    <div class="itemWrap">Element 8</div> 
</div> 
<!-- THIRD COLUMN --> 
<div class="pageColumnOneThird"> 
    <div class="itemWrap">Element 3</div> 
    <div class="itemWrap">Element 6</div> 
    <div class="itemWrap">Element 9</div> 
</div>

Херес jsfiddle, а также.

источник

2016-05-28 PhyCoMath

Можете ли вы сделать JSFiddle? – martin

@Martin добавил :) – PhyCoMath

Значит, вы просто хотите использовать медиа-запросы? https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Я не понимаю, что вы пытаетесь сделать. – martin

вы можете просто использовать одну обертку, а затем просто использовать @media запросов

.pageColumnOneThird { 
 
    font-size: 0; 
 
} 
 
.itemWrap { 
 
    background-color: #AEAEAE; 
 
    margin: 2px 0; 
 
    width: 33.3%; 
 
    padding: 0 1px; 
 
    height: auto; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    font-size: 16px 
 
} 
 
@media (max-width: 768px) { 
 
    .itemWrap { 
 
    width: 50% 
 
    } 
 
} 
 
@media (max-width: 480px) { 
 
    .itemWrap { 
 
    width: 100% 
 
    } 
 
}

<div class="pageColumnOneThird"> 
 
    <div class="itemWrap">Element 1</div> 
 
    <div class="itemWrap">Element 2</div> 
 
    <div class="itemWrap">Element 3</div> 
 
    <div class="itemWrap">Element 4</div> 
 
    <div class="itemWrap">Element 5</div> 
 
    <div class="itemWrap">Element 6</div> 
 
    <div class="itemWrap">Element 7</div> 
 
    <div class="itemWrap">Element 8</div> 
 
    <div class="itemWrap">Element 9</div> 
 
</div>

EDIT на основе ОП комментарий:

Это не то, что я я ищу, так как мне нужно разрешить разные высоты на каждый элемент элемента, но поддерживать равный март gin БЕЗ добавления пустое пространство в элементах. Вот почему мне нужно использовать три отдельных столбца . Нашли картину того, что мне нужно https://prod-foundation-forum.s3.amazonaws.com/uploads/part/part_image/93067/illustration.jpg

Для этого типа макета лучше всего для вас является masonry

источник

2016-05-28 21:25:22 dippas

Это не то, что я ищу, поскольку мне нужно иметь разные высоты для каждого элемента элемента, но поддерживать равный запас без добавления пустого пространства в элементы. Вот почему мне нужно использовать три отдельных столбца. Найдена картина того, что мне нужно https://prod-foundation-forum.s3.amazonaws.com/uploads/part/part_image/93067/illustration.jpg – PhyCoMath

@GjertIngarGjersund см. Обновленный ответ – dippas

Ницца! Именно то, что я искал. Спасибо. Вы знаете, какой тип сетки называется? – PhyCoMath

Ответственные столбцы div, где элементы столбца меняются на размер экрана

ответ

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