CSS로 2 열로 텍스트 분할

Question

텍스트를 2 열로 나누려고합니다. 문제는 첫 번째 클래스의 div div 콘텐츠가 너무 많아서 div가 주 div 아래에 놓이게된다는 것입니다.

HTML

<div class="a textbox"> 
This is a main div 
</div> 

<div class="b textbox"> <!-- the problem is when this text became too much, the second class b div is pushed under the main one--> 
    This is a side bar div 
</div> 

<div class="b textbox"> 
    This is another sidebar div 

CSS

.a{float:left; width:70%; margin:10px;} 
.b{float:left; color:blue; width:20%; margin:10px} 
.textbox{text-align:justify;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; background: rgba(113,113,113,0.5); 
     -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;} 

내 바이올린 :

http://fiddle.jshell.net/hbqs6/1/

예상 결과 :

주요 사업부 측 div1

주요 사업부 측 div1

주요 사업부 측 DIV2

주요 사업부 측 DIV2 방법 float: left 작품이다

Answer 1

HTML :

<div class="a textbox"> 
    <p> aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa 
     aaaaaaaaaaaaaaa</p> 
    <p> aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa 
     aaaaaaaaaaaaaaa</p> 
<p>  aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa 
    aaaaaaaaaaaaaaa 
     aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa</p> 
    aaaaaaaaaaaaaaa 
</div> 

<div class="b"> 
<div class="textbox"> <!-- the problem is when this text became too much, the second class b div is pushed under the main one--> 
    aaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaa aaaaaaaaaaa aaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaa aaaaaaaaaaa aaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaa aaaaaaaaaaa aaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaa aaaaaaaaaaa 
</div> 

<div class="textbox"> 
    aaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaa 
</div> 
</div> 

CSS :

.a{float:left; width:70%; margin:10px;} 
.b{float:right; color:blue; width:20%; margin:10px} 
.textbox{text-align:justify;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; background: rgba(113,113,113,0.5); 
     -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;margin-bottom:10px} 

http://fiddle.jshell.net/hbqs6/5/

Answer 2

.

두 셀 테이블 행을 사용하여 열을 구분하거나 두 열의 래퍼 div에 display: inline-block으로 설정하고 첫 번째 열에 max-width을 설정하는 것이 좋습니다.

Answer 3

HTML

<div class="a textbox"> 
    <p> aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa 
     aaaaaaaaaaaaaaa</p> 
    <p> aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa 
     aaaaaaaaaaaaaaa</p> 
<p>  aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa 
    aaaaaaaaaaaaaaa 
     aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaaaaa 
    aaaaaaaaaaaaa</p> 
    aaaaaaaaaaaaaaa 
</div> 

<div class="b textbox"> <!-- the problem is when this text became too much, the second class b div is pushed under the main one--> 
    aaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa 
</div> 

<div class="b d textbox"> 
    aaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaa 
</div> 

CSS :

012 3,516,

.a{float:left; clear:right;width:70%; margin:10px;} 
.b{float:right; clear:right;color:blue; width:20%; margin:10px} 
.d{float:right; margin-top: 10px;} 
.textbox{ 
    text-align:justify; 
    padding:10px; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    background: rgba(113,113,113,0.5); 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;border-radius: 10px; 
} 

뿐인 : http://fiddle.jshell.net/hbqs6/4/

Answer 4

수학 및 래퍼가 당신의 친구, 그래서 높이가 : 자동; http://fiddle.jshell.net/hbqs6/6/