Question

我有两个浮动：左边的元素彼此相邻。当父元素太窄而不能将两个文本都放在一行上时，我希望文本下到下一行，但每个文本都在它们自己的“列”中。父宽度是灵活的，所以我不知道它会是什么。

http://jsfiddle.net/jsHCJ/1/说明了问题以及我希望解决方案看起来像什么。

<div id = "page2">
    <div class = "f1">
        float 1
    </div>
    <div class = "f2">
        float 2 and long
    </div>
</div>

#page2 {width:110px; }  

.f1{ 
  background:pink; 
 float:left;
}

.f2{
    background:yellow;
    float:left;
}

Answer 1

简单。对两个div使用display:table-cell;。

这样做的是当页面缩小或展开时，div将位于同一位置，并且应该相应地扩展或缩小文本。

Answer 2

如果我是你，我会使用

display: table-cell

我已经更新了你的小提琴 http://jsfiddle.net/jsHCJ/2/

Answer 3

您可以将#page 2的css更改为喜欢这个

#page2 {
    display: inline-block;
    width: 150px;
}

Answer 4

尝试在＃page2中添加css

display: inline;

这将解决您的问题

css，float：left，将文本保存在自己的列中

4 个答案: