Question

我正在尝试将文本拆分为2个列。问题是那时第一类b 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/

预期结果：

主div侧div1

主div侧div2

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

这就是float: left的工作方式。

我建议使用两个单元格表行来分隔列，或者只让列位于两个包含display: inline-block的包装器div中，并在第一个上设置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：

    .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;
}

FIDDLE：http://fiddle.jshell.net/hbqs6/4/

Answer 4

数学和包装是你的朋友，高度：自动;见http://fiddle.jshell.net/hbqs6/6/

使用css将文本拆分为2列

4 个答案: