1

フローティング要素に問題があります。私が欲しいのは、ブラウザ ウィンドウのサイズを変更して、ボックス 3 がボックス 1 のすぐ下になるようにすることです

HTML:

<div class="box">
    <p>box 1</p>
    <p>box 1</p>
    <p>box 1</p>
</div>
<div class="box">
     <p>box 2</p>
    <p>box 2</p>
    <p>box 2</p>
    <p>box 2</p>
    <p>box 2</p>
</div>
<div class="box">
     <p>box 3</p>
    <p>box 3</p>
    <p>box 3</p>
</div>

CSS:

.box {
    width:80px;
    float:left;
    border:1px solid slateGrey;
    margin:0 0 0 10px;
    padding:10px;
}

フィドルを見る:フィドル

clear プロパティで何かを試しましたが、何も役に立ちません。

4

3 に答える 3

3

この動的レイアウトは、js でのみ実行できます。たとえば、石積みプラグインを使用します。

于 2013-07-25T11:57:13.663 に答える
0

ブラウザーのサイズを変更して特定のサイズに達したときにレイアウトを制御したい場合は、おそらくメディア クエリを検討する必要があります。

http://en.wikipedia.org/wiki/Media_queries

この件についてはたくさんの資料があるので、参考のためにウィキペディアにリンクしています。

于 2013-07-25T11:53:15.553 に答える
0

これは予期される CSS の動作です。フィドルを開いたままブラウザ ウィンドウのサイズを変更すると、ボックス 3 がボックス 1 の下に表示されます。ボックス 3 を常にそのように表示するには、次の.clearクラスのようなものを追加する必要があります。

.clear{
  clear: left;
}

ボックス 3 が正しい場所に表示されますが、ボックス 2 の下の境界線のすぐ下に表示されます。すべてのボックスがフローティングされているため、CSS ではそれらが 1 つの線上にあるかのように扱われ、その線は最も高い と同じ高さになり.boxます。.clearedのボックスを導入すると、その行の下に表示されます。を使用して位置を調整できますmargin-top。たとえば<div>、ボックス 3 の要素を次のように変更します。

<div class="box clear" style="margin-top: -70px;">

これが役に立ったことを願っています。

編集: ああ、また: 3 つのボックスすべてを並べて表示する余地がないときにこれを動的に追加する場合は、3 つのボックスを 1 行にまとめるために必要なスペースを計算してから、次のようなメディアクエリ:

@media all and (max-width: 500px){
    .box.clear{
      clear: left;
      margin-top: -70px;
    }
  }

500px が必要なスペースです。ボックスの内容が大幅に変更される場合は、これを使用しないことをお勧めします。

于 2013-07-25T12:00:04.960 に答える