代码之家 › 专栏 › 技术社区 › Alex

CSS-简单的两列

css-float image css

5

Alex · 技术社区 · 15 年前

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

我需要图像旁边的文本不是环绕它,而是显示在它旁边(如图中所示),如另一列。同时,文本需要跨越整个页面宽度。这将很容易通过设置文本左边距来实现,但问题是我不知道图像的确切宽度。图像大小可以变化。。。

有什么解决办法吗?

4 回复 | 直到 13 年前

1

6

Ryan Kinal 15 年前

http://jsfiddle.net/BG7FA/

这在IE6中不起作用(如图所示)

2

0

Konrad Garus 15 年前

联合收割机 float: left 在两个元素上 display: block 在文本上。

3

0

Francesco Pasa 15 年前

更简单的方法是创建一个包含两个单元格的表,一个用于图像,一个用于文本。你不会使用css,但它适用于任何浏览器。

4

0

SamGoody 15 年前

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

逻辑是一个div(甚至是一个浮动div)应该扩展以填充可用空间,并且父级不会拉伸或允许溢出,因为这两个参数都设置了。