float 요소가있을 때 CSS에 요소를 포함하기위한 테두리

이 2 열 레이아웃에서는 전체 페이지에 테두리를 넣을 수 있습니다. <body> 태그 안에 'border : solid'를 넣으면 작업을 수행 할 수 있다고 생각했지만 그렇지 않았습니다. 그것은 단지 표제 <h1> 위에 국경을 두었습니다. 누군가 도울 수 있을까요? 감사합니다.float 요소가있을 때 CSS에 요소를 포함하기위한 테두리

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Two Column Layout</title> 
     <style type="text/css"> 
      body { 
       width: 960px; 
       font-family: Arial, Verdana, sans-serif; 
       color: #665544; 
       border: solid; 
       } 
      .column1of2 { 
       float: left; 
       width: 620px; 
       margin: 10px;} 
      .column2of2 { 
       float: left; 
       width: 300px; 
       margin: 10px;} 
     </style> 
    </head> 
    <body> 
     <h1>The Evolution of the Bicycle</h1> 
     <div class="column1of2"> 
      <h3>The First Bicycle</h3> 
      <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p> 
      <p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p> 
      <h3>Further Innovations</h3> 
      <p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p> 
      <p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p> 
     </div> 
     <div class="column2of2"> 
      <h3>Bicycle Timeline</h3> 
      <ul> 
       <li>1817: Draisienne</li> 
       <li>1865: Velocipede</li> 
       <li>1870: High-wheel bicycle</li> 
       <li>1876: High-wheel safety</li> 
       <li>1885: Hard-tired safety</li> 
       <li>1888: Pneumatic safety</li> 
      </ul> 
     </div> 

    </body> 
</html>

출처

2012-10-06 root

가장 쉬운 해결책은 DECL하는 것입니다 본문에'overflow : auto'가 있습니다. – Christoph

부풀려진 요소는 문서 흐름에서 촬영, 그들이 떴다하지 않는 결과로 자신의 용기는 는 너비 또는 높이에 대해 아무것도 몰라.

마치 2D 인 것처럼 문자 그대로 컨테이너 위에 떠있었습니다.

플로트 몸 :
당신이 피해 갈 수 두 가지 옵션 있습니다.
페이지 컨테이너 div에 div를 래핑하고을 플로팅하십시오.

출처

2012-10-06 21:03:28 James

얼마나 나쁜 해결책입니까! 올바른 힌트는 부유물을 없애는 것이 었습니다. 의사 요소 clearfix 또는 추가 요소를 사용하여 몸에 오버플로를 적용합니다. – Christoph

다른 브라우저가 오버 플로우에 반응하는 방식으로 신뢰할 수 없다는 것을 알았습니다. pseudoelement를 사용하는 clearfix에 대해서는 좋은 생각입니다. 나는 그걸 생각하지 않았다. – James

신뢰할 수 없다는 예를 들어 줄 수 있습니까? 나는 그것을 아주 많이 사용했고 결코 문제를 보지 못했다. – Christoph

http://jsfiddle.net/v5gSt/

동안 의미하지, 스타일과 clear:both 수정을 닫는 body 태그 전에 빈 사업부를 추가.

jsFiddle example

출처

2012-10-06 21:03:04 j08691

훌륭한 솔루션! –

또는 pseudoelement를 사용하거나 본문에서 오버플로를 선언하십시오. – Christoph

실제로 border: solid; 작품 :)하지만 두 사업부가 float: left로 설정되어 있으므로 마지막 DIV 후 요소에 clear CSS 속성을 사용하는이 문서 흐름의 제거가 있습니다.

완벽과는 거리가 멀다하지만 작동하는 매우 기본적인 예 :

<style type="text/css"> 
clear 
{ 
    clear: both; 
} 
</style> 
<div class="column2of2"> 
... 
</div> 
<br class="clear"></span>

이 거기에 명확하게 당신이 줄 앞에 넣어 Quirksmode

출처

2012-10-06 21:14:37 Satevis

에 그 중 일부를 볼 수 있습니다 생성을위한 솔루션의 많은 신체의 종료 태그

<div style="clear:both "></div> 


<html> 
<head> 
    <title>Two Column Layout</title> 
    <style type="text/css"> 
     body {  
     width: 970px; 
     font-family: Arial, Verdana, sans-serif; 
     color: #665544; 
     border:medium black inset; 
     }   
     .column1of2 { 
     float: left; 
     width: 620px; 
     margin: 10px; 
    } 
     .column2of2 { 
     float: left; 
     width: 300px; 
     margin: 10px; 
    } 
    </style> 
</head> 

<body>  
    <h1>The Evolution of the Bicycle</h1> 
    <div class="column1of2">   
     <h3>The First Bicycle</h3> 
     <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p> 
     <p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p> 
     <h3>Further Innovations</h3> 
     <p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p> 
     <p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p> 
    </div> 
    <div class="column2of2"> 
     <h3>Bicycle Timeline</h3> 
     <ul> 
      <li>1817: Draisienne</li> 
      <li>1865: Velocipede</li> 
      <li>1870: High-wheel bicycle</li> 
      <li>1876: High-wheel safety</li> 
      <li>1885: Hard-tired safety</li> 
      <li>1888: Pneumatic safety</li> 
     </ul>    
    </div>   
    <div style="clear:both "></div> 
</body>

출처

2012-10-06 21:39:52 mesut

float 요소가있을 때 CSS에 요소를 포함하기위한 테두리

답변

관련 문제