2

我正在尝试使用标签和基本边框制作一个对打印机友好的页面。到目前为止，我的代码是...

<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

非常感谢任何和所有的帮助，Rock

ps 这是一个有趣的 JFiddle

4

5 回答 5

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/rYj7M/

于 2013-10-22T18:26:18.007 回答
3

您需要清除浮动：

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>
于 2013-10-22T18:26:31.400 回答
2

你需要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/

于 2013-10-22T18:27:22.067 回答
0

添加：

overflow: auto

到周围的 div

于 2013-10-22T18:26:58.050 回答
0

之所以如此，是因为漂浮的孩子。

试试这样：

<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/

于 2013-10-22T18:33:58.677 回答