отображение нумерованного списка в двух неровных столбцах

Question

[ссылка на сайт] [1]

У меня проблема с выравниванием ящиков с текстом. Все они имеют разные размеры и должны быть организованы в две колонки без полей.

Я использовал следующий код: 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

Режим макета

Использование CSS3 Flexbox

• обернуть < Див > с, а < DIV класс = "контейнер" >
• добавить 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-фильтр ниже, чтобы отсортировать ваши товары в столбцах и evens column.

// 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); 
}); 

вот скрипку: 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; 
} 

Answer 2

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

min-height: 400px; 
height: auto; 

И удаление

max-height:100%; 

Могут быть другие способы сделать это, но это, безусловно, одно.

Answer 3

Я хотел бы использовать что-то вроде: Wrap новый сНу

.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