邊框不能用於Div的「表格」

我正在嘗試使用標記和基本邊框製作打印機友好的頁面。我的代碼截至目前是...邊框不能用於Div的「表格」

<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

任何及所有幫助非常感謝，搖滾

ps這裏是一個燃燒器的JFiddle

來源

2013-10-22 Racksickle

嗯......你清楚你的花車？！？！？ –

添加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-22 18:26:18

像魅力一樣工作。感謝你及時的答覆。我一定會盡快將答案標記爲答案。 – Racksickle

你需要清除浮動：

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-22 18:26:31 isherwood

地址：

overflow: auto

到周邊DIV

來源

2013-10-22 18:26:58

你需要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-22 18:27:22 CodeLikeBeaker

正是如此，因爲流動兒童。

嘗試這樣的：

<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-22 18:33:58 kwach

邊框不能用於Div的「表格」

回答

相關問題