Question

我正在尝试使用标签和基本边框制作适合打印的页面。截至目前我的代码是......

<div style="width: 100%; border: 1px solid black;">
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 34%; float: left; ">Text</div>
</div>

唯一应用的CSS是内联。这在我想要它在IE中的方式工作... http://i.stack.imgur.com/abjdX.png

在Chrome中，“表格”的内容显示在边框下方，就像这样...... http://i.stack.imgur.com/qYNnk.png

非常感谢任何和所有帮助，岩石

P.S。这是一个关于funsies的JFiddle

Answer 1

添加overflow: hidden。

<div style="width: 100%; border: 1px solid black; overflow: hidden;">
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 34%; float: left; ">Text</div>
</div>

http://jsfiddle.net/rYj7M/

Answer 2

你需要清除你的花车：

http://jsfiddle.net/isherwood/avAv5/

<div style="width: 100%; border: 1px solid black;">
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 34%; float: left; ">Text</div>
    <div style="clear: both;"></div>
</div>

Answer 3

您需要overflow: hidden

<div style="width: 100%; border: 1px solid black; overflow: hidden;">
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 34%; float: left; ">Text</div>
</div>

http://jsfiddle.net/L7S9h/

另一个解决方案是清除你的花车：

<div style="width: 100%; border: 1px solid black;">
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 34%; float: left; ">Text</div>
    <div style="clear: both;"></div>
</div>

http://jsfiddle.net/L7S9h/1/

Answer 4

添加：

overflow: auto

到周围的div

Answer 5

就是这样，因为漂浮的孩子。

试试这样：

<div style="overflow: hidden; width: 100%; border: 1px solid black;">
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 33%; float: left; ">Text</div>
    <div style="width: 34%; float: left; ">Text</div>
</div>

小提琴：http://jsfiddle.net/Sgqkw/

边界不适用于Divs的“桌子”

5 个答案: