Я использую сетку начальной загрузки для создания макета. В этом макете у меня есть страница, на которой отображаются вопросы и ответы в виде часто задаваемых вопросов. Я создал одну строку с 3 столбцами по 4 ширины. Я помещаю в них абзацы, которые содержат вопросы и ответы. Теперь у меня есть 13 таких абзацев и блок заголовков, содержащий логотип и два заголовка.
В настоящее время я использую максимальную высоту и отступы для div, чтобы попытаться распределить их равномерно, но это не работает везде, и мне просто любопытно посмотреть, есть ли более удобный способ разделить эти абзацы, поскольку я думаю, что это то, что более люди хотят делать.
Так что это мой текущий html;
<div class="row faq">
<div class="col-lg-4 lefttop">
<div class="faqtitle">
</div></div>
</div>
И это мой текущий css;
.faqcontainer {
margin-right:4%;
margin-top:2%;
}
.faq {
text-align: center;
font-size:18px;
}
.faq h3 {
font-size:22px;
padding-bottom:0px;
margin-bottom:0px;
font-weight:500;
}
.faq h1 {
margin-top:0px;
padding-top:0px;
font-size:50px;
color:#ee7d2f;
}
.faq p {
max-width:450px;
min-height:130px;
margin:0px auto;
text-align:left;
font-size:15px;
padding-top:30px;
}
.faq a {
color:#598edf;
background: none !important;
}
.faqtitle {
margin-top:0px;
padding-top:0px;
}
.faqtitle h2, h1 {
margin:0px;
padding:0px;
}
.numbers {
font-size:40px;
color:#598edf;
float:left;
padding-bottom:0px;
padding-right:6px;
font-weight:200;
}
.bigorange {
color:#ee7d2f;
font-size:70px;
font-weight:800;
}
.orange {
color:#ee7d2f;}
Теперь я попытался изучить автовыравнивание по вертикали, но другой вопрос в стеке показал, что это не тот путь. Установка одинаковой высоты и полей для всех также невозможна, так как некоторые абзацы немного длиннее других, но это компенсируется более короткими абзацами.
Может ли кто-нибудь дать мне предложение о более удобном/лучшем способе сделать это?
column-count: 3;
, jsfiddle.net/A6jC6. - person Josh Powell   schedule 17.12.2013