CSS赋予 float 在容器内的优先权

标签 css css-float

float:left 在 chrome 和 ie7 中表现不同,如 this fiddle 所示和下面的 ascii-art:

IE7 可以,

<-width->
Col1 Col2
text # #
     # #
     # #

代替

<-width->
Col1
text
col2
# # # # #
#

有没有办法在所有浏览器中获得 ie7 行为?

换句话说,除非页面非常窄,否则不要堆叠 col1 和 col2。目标是拥有一个“超流畅”的两列布局,其中 col1 适合其内容,而 col2 使用窗口的剩余宽度并包装其内容,或者如果不能放在 col1 旁边则显示在 col1 下方。

在回答和评论反馈后重写以更精确。

最佳答案

我仍然无法理解您的需求和问题所在。我将只发布一个答案,你可以在我们进行时记下这些想法。

尝试 1:

您需要至少在其中一列上设置宽度。

试试这个,然后告诉我它有什么问题。 http://jsfiddle.net/LpkQX/27/

尝试 2:

将右列 float 到左列内部。现在 column1 只是一个包装器。

http://jsfiddle.net/LpkQX/28/

关于CSS赋予 float 在容器内的优先权,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5935068/

相关文章:

html - 从右下角开始的方 block 网格

html - 激活一个按钮也会影响另一个?

css - 为什么 sIFR 3 不将文本环绕在 float 图像周围?

CSS float 问题: how can you position the boxes one below the other?

html - css - 向右浮动禁用链接

html - 如何使用 css 在图像上添加形状背景?

css - 位置固定 <td> 使元素移动

javascript - 如何使用以前的跨度顶部和左侧位置来放置其他跨度,以免它们相互重叠?

html - 如何给内部div相等的边距?

css - 左右浮动