0
<div class="header">

<div class="contact half">
    <dl>
        <dt>Email</dt>
        <dd>z@srgbethet.com</dt>

        <dt>Phone</dt>
        <dd>+456 333 444</dd>

        <dt>Website</dt>
        <dd>kkkk.com</dd>
    </dl>
</div>

<div class="skills half">
    <ul>
        <li>Quantum Accelerators</li>
        <li>dfeerfbe</li>
        <li>Parachuting</li>
        <li>Photon Cannons</li>
    </ul>
</div> 
</div>

CSSコード:

.half {
 float: left;
 width: 50%;
 }

最終的な結果は、接触divとスキルの両方divがうまく並んでいるということでした。float:left両方がプロパティをフォローしていたのに、なぜ衝突しなかったのですか?

4

2 に答える 2

6

要素に適用float:leftすると、次のブロック要素がその右側に配置されます(特に明記されていない限り)。

彼らが両方とも持っているという事実float:leftは無関係です、それはあなたの最初の要素がcontact half持っているという理由だけですfloat:left

私が作成したこのjsfiddleの例ではhalf、2番目の要素から削除しましたが、それらはまだ並んでいます。

http://jsfiddle.net/Curt/nV5Sx/

それらを並べて配置したくない場合はclear:left、2番目の要素を使用できます。

http://jsfiddle.net/Curt/nV5Sx/1/

どのように機能するかをもっと学ぶことであなたができるという印象を受けますfloat:left。このスタイリングプロパティの詳細については、次の便利なチュートリアルを参照してください。

http://css-tricks.com/all-about-floats/

于 2012-06-21T10:20:16.610 に答える
1

ここでfloatプロパティの定義を確認してください 。Floatはオブジェクトを水平方向に整列させるために使用されるため、競合しませんでした。2つの要素に同じクラスを使用しましたが、HTMLDOMには関係ありません。

于 2012-06-21T10:20:59.490 に答える