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;作品です:)しかし、2つの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であり、文字通りコンテナの上に浮かんでいるように考えてください。

これを回避するには、主に2つのオプションがあります。

  • 体を浮かせます。
  • divをページコンテナdivでラップし、それをフロートします。
于 2012-10-06T21:03:28.640 に答える