在两个不均匀的列中显示编号 div 的列表

Question

[link 到网站][1]

我对框与文本的对齐有疑问。它们都有不同的大小，应无边距地组织成 2 列。

我使用了以下代码： css

.article_advices_ed6a5a_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #ed6a5a;
}

.article_advices_f4f1bb_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #f4f1bb;
}

.article_advices_9bc1bc_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #9bc1bc;
}

.article_advices_5ca4a9_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #5ca4a9;
}

.article_advices_e6ebe0_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #e6ebe0;
}

html

<div class="article_advices_ed6a5a_left">
<h4>1. Следуй за белым графиком</h4>

Зная список участников и гостей, заранее составляй расписание встреч на выставке. Ты не сможешь окупить затраты на выставку, надеясь на трафик случайных посетителей. Ставь встречи с клиентами, готовыми к покупке или сотрудничеству, в то же время, что и с «холодными» клиентами. Это создаст о компании позитивное впечатление. И ты удивишься, как «горячие» клиенты смогут «продавать» за тебя.
</div>

<div class="article_advices_f4f1bb_left">
<h4>2. Рассылай всё равно</h4>

Поговаривают, что рассылка партнерам и клиентам анонса выставки по мэйлу уже не эффективна. Верно, но рассылай приглашения прийти к тебе на стенд, несмотря ни на что. Это знак внимания, плюс — всегда можно придумать вескую причину заглянуть к тебе. Например, скидку или подарок.
</div>

<div class="article_advices_9bc1bc_left">
<h4>3. Планируй утром</h4>

Если выставка идет несколько дней, проводи планерки с коллегами по стенду каждое утро. Напоминай роли и функции всей команде. А накануне выставки настрой людей на четкую цель: озвучь точный план продаж, контактов, встреч.
</div>


<div class="article_advices_5ca4a9_left">
<h4>4. Не трать время прессы зря</h4>
Поймать прессу сложно, поэтому заранее пригласи на стенд журналистов. Живое общение — основа взаимного доверия, а результат — лояльное отношение к компании и частое упоминание в публикациях. Организуй встречу так, чтобы у журналиста не осталось ощущения, что он потратил время впустую. Подготовь неформальную презентацию продукта, расскажи о нем интересно: журналист должен понять, чем твой продукт может быть полезен лично ему. Не забудь в финале встречи закрепить пройденное — вручи пресс-релиз, в котором письменно зафиксированы все озвученные тезисы. Будет здорово, если релиз в электронном виде будет на флэшке с логотипом компании. Не забудь записать на флэшку логотип и, если есть, фотографии. 
</div>



<div class="article_advices_ed6a5a_left">
<h4>5. Используй гид </h4>

Убедись, что организатор выставки включил описание твоей компании/продукта в печатный или электронный гид по выставке, пресс-релиз и пост-релиз. 
</div>


<div class="article_advices_f4f1bb_left">
<h4>6. Держи буклеты при себе</h4>

Не покупай место в пресс-стойке для своих буклетов. Весь раздаточный материал должен находиться у тебя на стенде: это дешевле, а главное — ты всегда будешь знать, кто получил буклет.
</div>



<div class="article_advices_9bc1bc_left">
<h4>7. Устрой трапезу</h4>
Сытая аудитория — лояльная аудитория. Неформальное общение с клиентами, партнерами или прессой в формате завтрака или ланча — идеальный вариант презентации. Только гостей надо подбирать тщательно и ориентироваться на их цели и мотивацию. На то и существует таргетирование и директ-маркетинг. Особенно удачно такой вариант презентации срабатывает с прессой. А сэкономить на организации завтрака-ланча можно, привлекая спонсоров. 
</div>




<div class="article_advices_5ca4a9_left">
<h4>8. Пакет — каждому</h4>

Если ты считаешь, что затраты на трапезу того не стоят, то дешевле, а иногда и эффективней, устроить короткую конференцию с хорошо таргетированной аудиторией. Не забудь положить на каждый стул папку с пресс-релизом, брошюрой или журналом. А лучше — брендированный пакет со всей информацией и небольшим сувениром от компании. Главное, чтобы конференция не длилась больше 30 минут, иначе внимание аудитории будет потеряно.
</div>



<div class="article_advices_e6ebe0_left">
<h4>9. Управляй стендом</h4>

Специально обученный человек, а не инженер или замдиректора, должен всегда присутствовать на стенде. Только маркетолог сможет оценить эффективность работу стенда и сориентироваться в ситуации, чтобы повысить профит от выставки. Менеджеры на стенде всегда ждут возможности «напасть» на посетителя, далеко не каждый менеджер способен заманить человека на стенд приятной беседой, а не нарочитой попыткой продажи. 
</div>



<div class="article_advices_ed6a5a_left">
<h4>10. Сортируй трафик</h4>

Помни простую схему эффективной работы: маркетолог приглашает гостя на стенд, менеджер анализирует гостя и выясняет потребности, иногда анкетирует, и только после этого гость идет к менеджеру по продажам и тот проводит с гостем столько времени, сколько потребуется. 
</div>


<div class="article_advices_f4f1bb_left">
<h4>11. Организуй доставку</h4>

Отличная возможность познакомить всех участников выставки со своей компанией — устроить им доставку утренней газеты в брендированном конверте, например. Но это сработает, если все участники живут в одном отеле. Иначе — заранее напечатай гид по местным ресторанам «по версии компании» и раздай прямо на выставке. Благодарности не избежать. 
</div>


<div class="article_advices_9bc1bc_left">
<h4>12. Не трать на безделушки</h4>

Часто раздаточный материал — пустая трата. За ним охотятся «выставочные коллекционеры», собирающие брендированные ручки и прочую ерунду. Реальные клиенты хотят от тебя решения их задач, а не брелок. Но если уж ты решил подготовить немного сувениров, пусть они будут релевантны продукту. Если ты представляешь приморский отель, вручай гостям пляжное полотенце, а не блокнот или наклейку на авто. 
</div>

<div class="article_advices_5ca4a9_left">
<h4>13. Отказывай красиво</h4>

Не раздавай буклеты и сувениры кому попало. Но прямо не отказывай. Скажи, что ты вышлешь буклет по почте, чтобы сейчас не пришлось таскать тяжести. Настаивай на своем. В лучшем случае ты получишь контакты посетителя и сможешь его идентифицировать, в худшем — человек поймет, что презент ему не достанется и уйдет с миром. 
</div>

<div class="article_advices_e6ebe0_left">
<h4>14. Движение — жизнь</h4>

Активнее всего гости выставок реагируют на движение. Если у тебя на стенде есть движущийся предмет, механизм, робот или фонтан — это половина успеха. Важно, чтобы нечто движущееся было релевантно продукту. Нет смысла ставить фонтан на стенд бумажной фабрики, пусть это будет гигантское оригами.
</div>

作为结果，它显示框之间的随机垂直空间。如果我添加 height:500px，这就会消失，但是所有的框都是相同的大小，这在我的情况下无法解决。

problem image

my goal

Answer 1

我认为对于你正在尝试做的事情，所有盒子都需要具有相同的最小高度，这对我来说很有效，使所有盒子的高度都是最大的盒子

min-height: 400px;
height: auto;

并删除

max-height:100%;

可能还有其他方法可以做到这一点，但这肯定是一种。

Answer 2

我会使用类似的东西：包装一个新的 div

.article-wrapper{
    display: table;
}

.article_advices_ed6a5a_left,

.article_advices_f4f1bb_left,

.article_advices_9bc1bc_left /* ... so on add all your div class*/{

    display: table-cell;
}

或者您也可以参考：

https://css-tricks.com/fluid-width-equal-height-columns/ http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

Answer 3

使用CSS3布局模式flexbox

用

添加CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1750px;  // use a size necessary to split text into two columns
}

不需要 float: left 属性。删除它们。
为了最好地实现预期结果，运行下面的 JavaScript 过滤器将您的项目排序在 odds 列 和 evens 列中。

// grabbing odd articles
var articlesLeft = document.querySelectorAll("[class^='article_advices_']:nth-child(odd)");
// grabbing even articles
var articlesRight = document.querySelectorAll("[class^='article_advices_']:nth-child(even)");
console.log(articlesLeft, articlesRight);
// clearing article nodes from container
var container = document.getElementsByClassName("container")[0];
container.innerHTML = "";
// appending all odd articles then appending even articles
articlesLeft.forEach(function(article) {
    container.appendChild(article);
});
articlesRight.forEach(function(article) {
    container.appendChild(article);
});

这里是 fiddle：https://jsfiddle.net/warkentien2/hcv2ps9r/1/

-- 还有：

你可以使用：flex-direction: row 但它需要 stretch

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

在两个不均匀的列中显示编号 div 的列表

display numbered div list in two uneven columns

html

css

position