0

次の HTML があるとします。

<style>
.b{
float:left; width: 300px; height: 300px;
}
</style>

<div style="overflow:hidden;width:300px;height:300px;" id="a">
    <div class="b" style="background-color: red"></div>
    <div class="b" style="background-color: green"></div>
    <div class="b" style="background-color: blue"></div>
</div>

.bdiv を 1 行に並べたい。ただし、これ#aは のオーバーフローが正常な場合にのみ行われます。

4

5 に答える 5

2

float:leftwhite-space: nowrap;への追加と削除#a.b

スクロールバーあり

#a{overflow:auto;width:300px;height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}​

デモ

スクロールバーなし

#a{height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}​

デモ 2

于 2012-12-12T07:02:06.913 に答える
0

#aのサイズは300pxx300pxです。したがって、この状況では、3つの要素が小さいサイズの要素に収まらない赤いdivしか表示されません。すべての.b要素の幅は300pxなので、次のようにする必要があります。 #aの幅を900pxに変更します-

于 2012-12-12T07:05:27.560 に答える
0

あなたがしなければならないのはdisplay:inline-block;、クラス b にスタイルを与えることだけです。以上です。

于 2012-12-12T07:24:24.990 に答える
0

css プロパティdisplay:inline-blockを追加します。

リライト

<div style="overflow:hidden;width:300px;height:300px;" id="a">

に

<div style="overflow:hidden;width:300px;height:300px;display:inline-block" id="a">
于 2012-12-12T06:59:56.403 に答える
0

Overflow300px を超えることはできないと言っているプロパティです。

したがって、それらを隣り合わせにスタックするには、プロパティfloat:left;を使用し、300px 内に収まるようにしてください。

例

<style>
.b{
float:left; width: 100px; height: 300px;
}
</style>

<div style="overflow:hidden;width:300px;height:300px;" id="a">
    <div class="b" style="background-color: red"></div>
    <div class="b" style="background-color: green"></div>
    <div class="b" style="background-color: blue"></div>
</div>
于 2012-12-12T07:26:10.200 に答える