0

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

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

4 回答 4

0

简单的。用于display:table-cell;两个 div。

这将做的是当页面缩小或扩大时，div 将在同一个地方，并应采取相应的文本扩大或缩小。

于 2013-07-31T07:13:43.277 回答
0

如果我是你，我会用

display: table-cell

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

于 2013-07-31T07:14:49.670 回答
0

您可以将#page 2 的 css 更改为这样

#page2 {
    display: inline-block;
    width: 150px;
}
于 2013-07-31T07:15:00.930 回答
0

尝试在#page2 中添加 css

display: inline;

这将解决你的问题

于 2013-07-31T07:19:34.797 回答