4

*そして、前の各行を埋めるときに新しい行を開始するには?
これはうまくいくはずですが、私にはうまくいきません
.html：

<div id="squares">
<div id="1">
width:150px;
height:150px;
</div>
<div id="2">
width:150px;
height:150px;
</div>
<div id="3">
width:150px;
height:150px;
</div>  
</div>

これにより、ページに3つのボックスが確立されました

CSS:

#squares {
display:inline;
background-color:#000000;
}

css は、それらが適切な場所にあるかどうかを判断できるように、整列して黒くするように指示する必要があります。
何か追加する必要がありますか? この結果を達成するための別の方法を考えられますか?

4

5 に答える 5

6

HTML

<div id="squares">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>​

CSS

#squares div {
    /* these styles will let the divs line up next to each other
       while accepting dimensions */
    display: block;
    float: left;

    width: 150px;
    height: 150px;
    background: black;

    /* a small margin to separate the blocks */
    margin-right: 5px;
}

を使用する代わりに、スタイリングfloatを使用することもできます。inline-block

display: inline-block;
zoom: 1;
*display: inline;
于 2012-08-08T19:24:45.453 に答える
1

idが「squares」のdiv内のdivに適用する必要があることを示すdivステートメントがありません。

css:
#squares div {
display:inline;
background-color:#000000;
}
于 2012-08-08T19:22:32.843 に答える
1

最良のアプローチは、display: inline-block; を使用することです。

HTML

<div id="squares">
<div id="1" class="square">
</div><div id="2" class="square">
</div><div id="3" class="square">
</div>
</div>​

HTML マークアップがどのようにフォーマットされているかに注意してください。display inline-block を使用している間は、要素間に余分なマージンが生じないようにすることが重要です (これを確認してください) 。

CSS:

.square {
background-color: #000;
display: inline-block;
height: 150px;
vertical-align: top;
width: 150px;
*display: inline;
zoom: 1;
}

開発者の目的のために、次を追加できます: CSS:

.square {outline: 1px solid red;}

そのため、レイアウトを壊さずに寸法を確認できます (要素の自然な幅を拡張することにより)。

于 2012-08-08T20:15:16.880 に答える
0

あなたが行方不明だと思います;

div {float:left;}
于 2012-08-08T19:20:22.647 に答える
0

私が正しく理解している場合、各 div #1 #2 および #3 を幅 150 ピクセル、高さをすべて 1 行に並べる必要があります。

そのように、メインのdivではなく各divをターゲットにしたい

#squares > div {
    display:block;
    float:left;
    width:150px;
    height:150px;
    background-color:#000000;
    margin-right:5px;
}
于 2012-08-08T19:27:26.963 に答える