Divs의 "table"에 테두리가 작동하지 않습니다.

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는 인라인입니다. 이 ... http://i.stack.imgur.com/qYNnk.png

하나를 내가 IE에서 그것을 원하는 방식으로 ... 크롬에서 http://i.stack.imgur.com/abjdX.png

에서, "테이블"의 내용과 같이, 경계 아래에 표시를 작동하고 모든 도움은 대단히 감사합니다. 바위

ps 여기 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

당신은 당신의 수레 취소해야합니다 : 주변에

overflow: auto 

:

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

추가 사업부

Answer 4

당신은 당신의 수레를 취소 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 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/