0

以下の例を参照して、ビューポートの幅をゆっくりと縮小してください。

ビューポートの幅が縮小するにつれて、4 番目の div を最初の div のすぐ下に配置し、さらに縮小すると、3 番目の div を 1 番目の下に、4 番目を 2 番目の下に配置します。なぜこれが起こっているのか理解していますが、私が望む動作を得るために何をすべきかわかりません。

助けてください！

<html>
<head>
<style>

.columnClass
{
    float:left;
    border: 2px solid;
}

</style>
</head>
<body>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="400" height="400"/>
</div>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="200" height="600"/>
</div>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="400" height="400"/>
</div>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="200" height="600"/>
</div>

</body>
</html>
4

2 に答える 2

2

クラス パラメータを次のように変更します。 

.columnClass
{
    display: inline-block;
    vertical-align: top;
    border: 2px solid;
}

http://jsfiddle.net/N7usG/
ここでは、画像の幅を縮小して動作を確認しています。

于 2013-02-20T18:58:29.250 に答える
0

float を持つ要素: left; 何かにぶつかるまで、できるだけ高く左に浮かびます。あなたの場合、交互の長さの写真があります。4 番目の左上隅が 2 番目の右下隅に当たると、そこで停止します。代わりにできることは次のとおりです。

<style>
.columnClass {
    height: 600px;
    float: left;
}
</style>

これにより、コンテナの高さが一定になり、希望どおりに浮きます。

于 2013-02-20T18:43:47.767 に答える