5

何時間も検索しましたが、問題の実行可能な解決策が見つかりませんでした。アドバイスをお願いします。

私が欲しいのは、内部のいくつかのフローティング div をラップする div です。高さを折り返すことは私にとって問題ではありませんが、ブラウザのサイズを変更して浮動要素が飛び降りる幅にすると、幅が正しく折り返されません。

ここにいくつかのサンプルコードがあります:

HTML:

<div class="wrapper">

    <div class="block1">
    </div>

    <div class="block2">
    </div>
</div>

CSS:

body {
    border: solid 1px green;
}

.wrapper {
    border: solid 1px red;
    display: table;
}

div {
    display: block; 
}

.block1 {
    float: left;
    width: 390px;
    height: 390px;
    background-color: blue;
}

.block2 {
    float: left;
     width: 390px;
    height: 390px;
    background-color: yellow;
}

したがって、基本的には、ラッピング div に、内部の div が必要とする幅を常に持たせたいと考えています。ウィンドウのサイズを変更し、右の div を左の下にジャンプさせることで、この例ではラッピング div の幅が 390px になるはずです。

作成しようとしているレスポンシブ Web サイトにはこのソリューションが必要で、できるだけ早く必要です。

純粋な CSS ソリューションが好まれますが、JS または jquery も適しています。

4

7 に答える 7

1

ラッパー div で CSS メディア クエリを使用できます。そのようです：

@media (max-width: 783px) {
 .wrapper {
    max-width: 390px;
  }
}

例については、このコードペンを参照してください。

于 2012-11-18T15:27:55.607 に答える
0 
<div class="wrapper">

    <div style="display:table-row">

        <div class="block1">
        </div>

        <div class="block2">
        </div>

    </div>

</div>



.wrapper {

    border: solid 1px red;
    display: table;

}

.block1 {

    display:table-cell;
    width: 390px;
    height: 390px;
    background-color: blue;

}

.block2 {

    display:table-cell;
    width: 390px;
    height: 390px;
    background-color: yellow;

}
于 2012-11-20T07:11:09.430 に答える
0

皆様のご協力をよろしくお願いいたします。

ウィンドウサイズを読み取り、ラッパー幅を手動で設定することで、JavaScriptを使用してそれを行うことになりました。

ありがとう！

于 2012-11-18T19:22:32.710 に答える
0

width または min-width を使用して、「デスクトップ」で div 780px を維持し、ブロックが折り返される原因となる低い画面幅で、親の幅を 390px に設定することはできません。これらを適切なメディア クエリでラップし、叔父をボブします.....

HTH

于 2012-11-18T15:11:14.277 に答える
0

Javascriptが唯一の方法である可能性が非常に高いです...

使用して$(window).resize

および: Javascript ブラウザの幅

ブラウザーの幅がわかれば、使用可能なスペースを分割してラッパー div の幅を指定し、フローティング div をラップすることができます。

于 2012-11-18T15:11:17.960 に答える
0

追加

    white-space: nowrap;

.wrapper に

于 2012-11-18T15:25:32.977 に答える
0

このクラスを変更するのはどうですか

.wrapper {
border: solid 1px red;
display:table;
**white-space:nowrap;**
}

または、左のdivを修正したい場合は、ウィンドウのサイズが変更された場合、右のdivのみがサイズ変更されます

これを正しいdivにします：

display: block;
position: absolute;
top:0; 
right:0;
margin-left: *your_fixed_left* px;
于 2012-11-18T15:29:00.580 に答える