html - 向左浮动 div 但下方没有更多文字？

Question

这是我的CSS：

<style type="text/css">
    .column_n {
        margin: 20px;
        float: left;
        width: 250px;
    }
</style>

问题是我在页面左侧有一列。但是在左侧的元素完成后，另一个 div 上的文本开始填充它的下方。像这样的东西：

xxxxxx yyyyyy
xxxxxx yyyyyy
xxxxxx yyyyyy
xxxxxx yyyyyy  
yyyyyyyyyyyyy
yyyyyyyyyyyyy

我想要的是：

xxxx yyyy
xxxx yyyy
xxxx yyyy
     yyyy
     yyyy

我怎样才能做到这一点？

谢谢！

html代码：

<div class="column_n"> 
    xxxxxxxxxxxxxxxxxxxxxxxxxxx 
</div>
<div> 
    yyyyyyyyyyyyyyyyyyyyyyyy 
</div>

Answer 1

按照 Roy 的建议更新为使用 inline，但是您需要使用 display:inline，而不是 display:inline-block；

这里有一个演示：http: //tinkerbin.com/VAEFGoBm

试试这个 ：

<style type="text/css">
    .column_n {
        margin: 20px;
        display:inline;
        width: 250px;
    }
 .column_b {
        margin: 10px;
        display:inline;
        width: 250px;
    }
</style>

<div class="column_n"> 
    xxxxxxxxxxxxxxxxxxxxxxxxxxx 
</div>
<div class="column_b"> 
    yyyyyyyyyyyyyyyyyyyyyyyy 
</div>

Answer 2

设置这个 -

display: inline-block;

对于两列。使用 float: left 可能没有必要。

Answer 3

HTML：

<div class="column_b"> 
    yyyyy yyy yyyyyyyyyyyyyyyy    ssssssssss sssssssssssss
</div>
<div class="column_c"> 
    ddddddddddd dddddddddd dddddddda assssssssssss
</div>

CSS：

<style type="text/css">
   .column_c {
     width:100px;
    background-color:red;
overflow:hidden;
   float:left;
    }
 .column_b {
   float:left;
          width:100px;
overflow:hidden;

    background-color:blue;
    }
</style>

这是你想要的一个jsfiddle：

http://jsfiddle.net/YDFLV/62/

Answer 4

试试这个：

<style type="text/css">
    .column_n {
        margin: 20px;
        float: left;
    }
    div{
        width: 250px;
        display: inline-block;
    }
</style>

http://jsfiddle.net/TeMWS/1/

Answer 5

我是这样做的：

.column_n { 边距：20px; 向左飘浮; 宽度：250px；}

.column_b { 左：290px; 位置：绝对；}