当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元素包含浮动元素时，用于包含元素的边框

回答

相关问题