1

在这个 2 列布局中，我想在整个页面上放置一个边框。我想如果我把 'border:solid' 放在<body>标签内就可以了，但事实并非如此。它只是在标题上加了一个边框<h1>。有人可以帮忙吗？谢谢！

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

4 回答 4

1

虽然没有语义，但在带有样式的结束 body 标记之前添加一个空 div 可以clear:both修复它。

jsFiddle 示例

于 2012-10-06T21:03:04.373 回答
1

实际上你的border: solid;作品:) 但是两个 div 被设置为float: left所以有删除文档流，你必须clear在最后一个 div 之后的元素上使用 CSS 属性。

非常基本的例子，它远非完美但有效：

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

有很多解决方案可以创建更清晰的内容，您可以在Quirksmode上查看其中一些

于 2012-10-06T21:14:37.087 回答
1

将此行放在正文的结束标记之前

<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-06T21:39:52.253 回答
-1

浮动元素从文档流中取出，因此它们的容器不知道它们的宽度或高度，除非它们是浮动的。

把它想象成它们是 2D 的，并且实际上是漂浮在容器的顶部。

你有两个主要的选择来解决这个问题：

  • 漂浮身体。
  • 将 div 包装在页面容器 div 中并使其浮动。
于 2012-10-06T21:03:28.640 回答