0

この url1: http://htmlandcssbook.com/code-samples/chapter-15/float.html では、テキストは float 要素の左に移動します。

しかし、この url2: http://htmlandcssbook.com/code-samples/chapter-15/columns-two.html クラス "column2of2" の float プロパティをキャンセルすると、div は column1of2 の横に残りません。

最初の URL でテキストがフローティング div の横にある理由がわかりませんが、2 番目の URL では、クラス「column2of2」がフローティング div の横にとどまることはできません。

4

2 に答える 2

0

最初の URL では、引用符は1 つの要素本体で右にフロートされます。そのため、テキストはその周りを折り返されます。

2 番目の URL では、コンテンツが2 つの div で区切られているため、引用テキストがコンテンツを囲んでいません。

于 2013-01-11T10:16:32.563 に答える
0

コンテンツの表示は、各例で完全に正しいです。

最初の例では、「正しい」ものです。テキストはページの本文に表示され、別の div が本文の右側に浮いています。フローティング div が占める領域にコンテンツを表示することはできません。その表示タイプは (デフォルトでは) http://www.w3.org/wiki/CSS/Properties/displaydisplay: block;を参照してください。

2 番目のケースでは、ページの本文にテキストが表示されたままですが、ページの本文に2 つの別個の div が含まれていることがわかります。デフォルトの表示プロパティのため、最初と同じように、display: block;何もオーバーラップできません。

これらが占める領域をハイライトしているこれらの 2 つの jsfiddles を参照してください。

.

「正しい」表示: http://jsfiddle.net/vxVfg/

「正しくない」表示: http://jsfiddle.net/duTEt/1/

.

そして、これが2番目のもので、「正しく」機能していませんでした: .

「正しくない」表示 - 修正済み: http://jsfiddle.net/duTEt/3/ (以下の説明と混同している場合は、jsfiddle の HTML セクションで編集した内容に 3 ～ 4 行のギャップを残しました。 、それを開いて見てください）

.

これは私が変更したものです：

ルール

.column2of2 
      {
        background: green;
        float: left;
        width: 300px;
        margin: 10px;
      }

なりました：

.column2of2 
      {
        background: green;
        float: right; /* THIS WAS CHANGED */
        width: 300px;
        margin: 10px;
      }

なんで？さて、私たちはそれを右側にしたいのです。

HTML マークアップ内の位置:

最後に、私はこれを取りました：

            <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 内に配置すると、次のようになりました。

<h1>The Evolution of the Bicycle</h1>
        <div class="column1of2">

 /* I PUT IT HERE */

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

 /* IT ENDS HERE */

            <h3>The First Bicycle</h3>
            <p>In 1817 Baron von Drais invented
于 2013-01-11T16:04:15.263 に答える