甚至在div中垂直划分段落

Question

我正在使用引导网格来构建布局.在这个布局中,我有一个页面,显示问题和答案作为常见问题解答.我创建了一行,每列有4列,每行4列.我在其中添加了包含问题和答案的段落.现在我有13个这样的段落和一个包含徽标和两个标题的标题div.

目前我正在使用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;}

现在我尝试查看vertical-align auto,但堆栈上的另一个问题显示这不是要走的路.由于某些段落比其他段落长一些,因此不可能在所有内容上设置相同的高度和余量,但这可以通过较短的段落来补偿.

任何人都可以给我一个更方便/更好的方法来做这个吗？

Answer 1

如果你不需要IE9及以下版本的支持那么我会推荐这种方法。

\n\n

Column-count当您想要制作偶数列时，这是一种很好的样式。

\n\n

这是我的做法，

\n\n

<div class="columnSplit">\n            <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>\n            <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\xc3\xa9 brug die eindeloze mogelijkheden biedt om systemen te koppelen met je omgeving.</p>\n            <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>\n            <p><span class="numbers">4</span> <b>En de kosten?</b> Zonder vaste overeenkomst hanteren wij standaard \xe2\x82\xac 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>\n            <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>\n            <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>\n            <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>\n            <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\xc3\xabnt te werken en continu\xc3\xafteit te waarborgen.</p>\n            <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>\n            <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\xc3\xabren 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>\n            <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>\n            <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>\n            <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>\n</div>\n

\n\n

我只将p内容放入该父级中。和h1其他内容似乎与列数有关，因此只需将您想要成为列的内容放入父级中即可。

\n\n

这是一个可以玩的JSFIDDLE 。您将需要做一些额外的样式，因为标签上的边距/填充p会导致一些小问题。

\n