div에서 단락을 세로로 똑같이 나누십시오.

Question

레이아웃을 빌드하는 데 부트 스트랩 격자를 사용하고 있습니다. 이 레이아웃에서는 질문과 대답을 FAQ로 표시하는 페이지가 있습니다. 각 4 열 3 열로 한 행을 만들었습니다. 나는 질문과 대답을 담고있는 단락을 넣는다. 이제 나는이 단락 중 13 개와 로고와 두 개의 헤더가 포함 된 제목 div가 있습니다.

현재 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;} 

이제 수직 정렬 자동차를 살펴 보았지만 스택에 대한 또 다른 질문은이 방법이 아니라는 것을 보여주었습니다. 단락의 일부가 다른 단락보다 조금 길기 때문에 모든 부분에 동일한 높이와 여백을 설정하는 것은 불가능합니다. 그러나 단락으로 보완됩니다.

아무에게도이 일을 더 편리하게/더 좋은 방법으로 제안 할 수 있습니까?

Answer 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 태그의 여백/패딩 때문에 약간의 문제가 발생할 수 있으므로 추가 스타일을 사용해야합니다.