CSS - 简单的两列

我有一个流体页（宽度为100％），与这里面：CSS - 简单的两列

[image-fixed-width] | [text-fluid-width -----------------------------------] 
        | ----------------------------------------------------- 
        | -----------------------------------------------------

我下一步需要的图像文字不环绕，但旁边显示它（如图所示），就像另一列。同时，文本需要跨越整个页面宽度。这将很容易通过设置文本左边距，但问题是我不知道图像的确切宽度。图像大小可以变化...

有没有解决方案吗？

来源

2010-07-06 Alex

尝试添加overflow：hidden;到您的内容分区。这应该强制它坚持你的专栏。

http://jsfiddle.net/BG7FA/

编辑这不会在IE6工作（去图）

来源

2010-07-15 19:28:07

圣洁的废话，那工作:) 谢谢 – Alex 2010-07-16 12:38:54

溢出：隐藏是魔术......它清除浮动，它强制列，它修复布局。 – 2010-07-16 15:22:16

在两个元素上合并float: left与文本上的display: block。

来源

2010-07-06 14:15:47

这是行不通的。 http://jsfiddle.net/Sdvt3/绿色应该伸展以填充剩余的空间。 – icktoofay 2010-07-06 14:30:36

对于绿色伸展，您需要基于表格的布局，静态尺寸或JavaScript。 – 2010-07-06 14:33:07

更简单的方法是使用2个单元格创建一个表格，一个用于图像，另一个用于文本。你不会使用css，但它可以与任何浏览器一起使用。

来源

2010-07-15 19:20:01

这是一个猜测，但我希望它的工作。

<div style='width:100%; overflow:hidden'> 
    <img style='float:left'/> 
    <div style='float:left'>my text</div> 
</div>

的逻辑是一个div（即使是浮动DIV）应扩大以填充可用的空间，并且父不会拉伸或允许溢出既是参数被设定。

来源

2010-07-15 19:38:52 SamGoody

CSS - 简单的两列

回答

相关问题