2

CSSはC++よりもはるかに難しく、混乱しているように感じるので、質問はほとんどありません。

次のHTML本文を検討してください

<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div>

そしてCSS

#mydiv1 {
    float: left;
    background-color: red;
    margin-right: -30px;
}

#mydiv2 {
    float: left;
    background-color: blue;
}

これはこのように見えます(私の最新のChromeでは)

ここに画像の説明を入力してください

2番目のdivがフロートしていて、最初のdivの上にフロートしているので、これは私には理にかなっています。

一方、mydiv2コンテンツの移動のみからfloatプロパティを削除すると、背景ボックスは同じ場所に残ります。

ここに画像の説明を入力してください

1)その理由を教えてください。

次に、マージンとフロートを削除し、両方のdivに幅を追加してCSSを作成します

#mydiv1 {
    background-color: red;
    width: 220px;
}

#mydiv2 {
    background-color: blue;
    width: 240px;
}

予想通りこんな感じになります

ここに画像の説明を入力してください

しかし、私がそれに追加float: leftする#mydiv1と、突然このようになります

ここに画像の説明を入力してください

2)2番目のdivが2倍になったのはなぜですか?z-index最初のdivを-1に設定して確認しました。

PS。私はCodeAcademyでチュートリアルを行い、smashingmagazine.comでfloat/margin関連の記事を読みました。悲しいことに、それはすべてを明確にしたわけではありません。これらの質問を私に説明してくれるオンラインリソースや本を提案していただければ幸いです。

4

3 に答える 3

1

div などのブロック レベル要素に float も width も指定しない場合、コンテナーの幅全体を占有します。

float の代わりに、幅と表示を与えることができます: inline-block. この表示プロパティは、コンテンツをインラインで表示し、ブロック レベル要素のように動作します。

于 2013-03-14T07:05:00.117 に答える