當CSS元素包含浮動元素時，用於包含元素的邊框

在此2列布局中，我希望在整個頁面上放置一個邊框。我認爲如果我在<body>標籤內放置「border：solid」可以完成這項工作，但它不會。它只在標題<h1>上放置一個邊界。有人可以幫忙嗎？謝謝！當CSS元素包含浮動元素時，用於包含元素的邊框

http://jsfiddle.net/v5gSt/

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

最簡單的解決方法是東方電氣在身體上是'overflow：auto'。 – Christoph

浮動元素取出文件流，並因此它們的容器不知道他們的高度或寬度任何東西，除非他們是浮動的。

認爲它就好像它們是二維的，並且實際上浮在容器頂部。

你有兩個主要選項爲了避開這個：

浮體。
將div包裝在一個頁面的容器div中，並將其浮動到。

來源

2012-10-06 21:03:28 James

多麼糟糕的解決方案！正確的提示本來是爲了清除漂浮物。通過僞元素clearfix或通過在身體上應用溢出來增加一個元素！ – Christoph

隨着不同瀏覽器對溢出的反應方式不同，我發現它不可靠。至於使用僞元素的clearfix，這是一個好主意。我沒有想到這一點。 – James

你能提供一個它不可靠的例子嗎？我用了很多，從未看到過問題。 – Christoph

雖然沒有語義，添加結束標記之前的空div的風格clear:both修復它。

jsFiddle example

來源

2012-10-06 21:03:04 j08691

偉大的解決方案！ –

或者更好的方法是在身體上使用僞元素或聲明溢出。 – 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

當CSS元素包含浮動元素時，用於包含元素的邊框

回答

相關問題