Равномерно разделить абзацы по вертикали в div

Я использую сетку начальной загрузки для создания макета. В этом макете у меня есть страница, на которой отображаются вопросы и ответы в виде часто задаваемых вопросов. Я создал одну строку с 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;}

Теперь я попытался изучить автовыравнивание по вертикали, но другой вопрос в стеке показал, что это не тот путь. Установка одинаковой высоты и полей для всех также невозможна, так как некоторые абзацы немного длиннее других, но это компенсируется более короткими абзацами.

Может ли кто-нибудь дать мне предложение о более удобном/лучшем способе сделать это?


person Jane    schedule 17.12.2013    source источник
comment
слишком большой... можете ли вы создать скрипку для простоты понимания, пожалуйста???   -  person NoobEditor    schedule 17.12.2013
comment
Я не могу поместить его в скрипку, потому что он встроен в бутстрап. Однако у меня есть онлайн-версия здесь; kellyvuijst.nl/FINAL это раздел "Информация".   -  person Jane    schedule 17.12.2013
comment
Вы можете написать скрипт для начальной загрузки с помощью bootply: bootply.com/new#   -  person BENARD Patrick    schedule 17.12.2013
comment
вот скрипт -› jsfiddle.net/p4RRV, но явно не хватает какой-то разметки...   -  person davidkonrad    schedule 17.12.2013
comment
Вот jsfiddle column-count: 3;, jsfiddle.net/A6jC6.   -  person Josh Powell    schedule 17.12.2013
comment
@JoshPowell, хороший, но не так хорошо поддерживается в IE caniuse.com/#search=column-count   -  person davidkonrad    schedule 17.12.2013
comment
Да, это из-за того, что IE - ужасная куча мусора, но нужна ли OP полная поддержка IE?   -  person Josh Powell    schedule 17.12.2013
comment
@davidkonrad Это из-за начальной загрузки. ;) Сделал бутпли; bootply.com/101045   -  person Jane    schedule 17.12.2013
comment
Если вы внимательно посмотрите на jsfiddle, который я разместил, вы увидите, что это скрипка twitter bootstrap 3...   -  person davidkonrad    schedule 17.12.2013
comment
Да, но я не знал, что это можно было сделать раньше, поэтому разметка отсутствует, вот что я пытался сказать. Спасибо за помощь мне.   -  person Jane    schedule 17.12.2013


Ответы (1)


Если вам не нужна поддержка IE9 и ниже, я бы рекомендовал этот метод.

Column-count — отличный стиль для использования, когда вы хотите сделать ровные столбцы.

Вот как я это сделал,

<div class="columnSplit">
            <p><span class="numbers">1</span><b>.. Konijntjes?</b> Wat begon als geintje voor een bedrijfsnaam liep al snel uit tot de start van een fantastisch avontuur. Krankzinnig? Wellicht. Marketingtechnisch handig? Het heeft z'n uitdagingen. Maar ach, je vergeet de naam niet snel.</p>
            <p><span class="numbers">2</span><b>Onze diensten?</b> Kort gezegd; ICT dienstverlening met een stukje elektrotechniek als aanvulling. Of het nu gaat om dagelijks beheer of incidenteel ondersteuning, wij nemen de technische touwtjes uit handen. Naast de techniek leveren wij desgewenst hardware, software en licenties. Standaard platform ondersteuning voor: Apple, Linux en Microsoft. En vragen omtrent oudere platformen zoals NT4 zijn natuurlijk ook van harte welkom. Al een beheerder in dienst? Gebruik ons dan als aanvulling of vraagbaak. En de elektrotechniek? Dat is dé brug die eindeloze mogelijkheden biedt om systemen te koppelen met je omgeving.</p>
            <p><span class="numbers">3</span> <b>Onze concept?</b> We doen het goed of we doen het niet. Geen grijze gebieden omtrent ondersteuning of beheer van het netwerk en alles daar omheen. Als wij iets niet kunnen dan leren wij het, simpel.</p>
            <p><span class="numbers">4</span> <b>En de kosten?</b> Zonder vaste overeenkomst hanteren wij standaard € 65,- per uur. Natuurlijk staan wij open voor verdere onderhandeling. Verder is al het beheer onder een vaste overeenkomst volledig gedekt. Ben je een goed doel? Neem contact op, wij dragen graag een technisch steentje bij.</p>
            <p><span class="numbers">5</span> <b>Doen jullie dan ook echt alles zelfstandig?</b> Uiteraard, Als de ruimte er is, zeker weten. Als onderdelen sneller, beter, goedkoper of zelfs gratis kunnen zullen we het zeker niet laten de zaken uit te besteden. Uiteraard houden wij de touwtjes in handen, het technisch geneuzel is immers ons ding.</p>
            <p><span class="numbers">6</span> <b>Hebben jullie referenties?</b> Uiteraard. Let wel, wij lopen niet zomaar te koop met ons klantenbestand. Onze relaties en bovenal het vertrouwen is ons heilig, daarom hanteren wij standaard een geheimhoudingsplicht. Al met al geven onze openbare referenties een mooi beeld van de diversiteit en mogelijkheden.</p>
            <p><span class="numbers">7</span> <b>Waarom ons?</b> Je huurt ons niet in omdat wij leuk kunnen programmeren of blindelings een configuratie in elkaar kunnen zetten. Onze kennis en producten helpen te besparen op tijd, geld, moeite en zenuwen. Wij maken onze geweldige klanten nog beter. En als wij iets niet goed doen, dan kost dat ons tijd. Niets meer, niets minder.</p>
            <p><span class="numbers">8</span> <b>Ons motto?</b> Flexibiliteit is koning. Niets vervelenders dan complexe omgevingen en lastige vraagstukken met bijkomstige afhankelijkheden. Iets waar je als ondernemer niet mee verveeld wilt worden. Het gaat om oplossingen die helpen efficiënt te werken en continuïteit te waarborgen.</p>
            <p><span class="numbers">9</span> <b>Hoe wij denken over ICT?</b> ICT draait om technische oplossingen, het vakgebied gaat echter verder dan techniek alleen. Het over de schutting gooien van allerlei softwarepakketten is dan ook niet onze doelstelling.</p>
            <p><span class="numbers">10</span> <b>ICT diensten en software ontwikkeling is helder, maar waarom ruimtevaart?</b> Het raakvlak tussen ICT en het creëren van een commercieel interplanetair netwerk ligt dichter bij elkaar dan je wellicht denkt. Internet in de ruimte, communicatie tussen Aarde, Maan, Mars en alles daar tussenin.</p>
            <p><span class="numbers">11</span> <b>Dat is er toch al lang?</b> Jazeker, alleen bieden de huidige technieken flink wat beperkingen. En zeg nu zelf; als je straks op Mars bent wil je toch ook zonder zorgen bellen met het thuisfront of de nieuwste filmpjes op internet kunnen bekijken?</p>
            <p><span class="numbers">12</span> <b>Klinkt spannend, wanneer is het klaar?</b> Wij zijn druk bezig met het plan de campagne en de bouw van het eerste prototype om daarna te werken aan een algehele productie en uitrol.</p>
            <p><span class="numbers">13</span> <b>Zijn er nog meer verrassingen?</b> Meer van onze avonturen kun je lezen op ons blog via <a href="http://blog.konijntjes.nl">blog.konijntjes.nl</a></p>
</div>

Я помещаю только содержимое p внутри этого родителя. h1 и другой контент, кажется, становится все странным с количеством столбцов, поэтому помещайте в родительский столбец только то, что вы хотите сделать столбцом.

Вот JSFIDDLE, с которым можно поиграть. Вам нужно будет сделать некоторые дополнительные стили, потому что поля/отступы в тегах p вызывают некоторые небольшие проблемы.

person Josh Powell    schedule 17.12.2013
comment
Это здорово, спасибо. Мне не нужна поддержка IE9 или ниже. - person Jane; 17.12.2013
comment
Это уже не многим нужно. :] Желаю удачи в вашем дизайне! - person Josh Powell; 17.12.2013
comment
что ж, IE8 по-прежнему является наиболее часто используемым IE —› winbeta.org/news/ ...Но +1, отличный ответ - person davidkonrad; 17.12.2013
comment
Ничего себе, это немного удручает, но, по крайней мере, IE 8 и IE9 не так ужасны для работы, как IE 6 и IE 7. - person Josh Powell; 17.12.2013