5

ネストされた div が改行でどのように動作するかに問題があります。これを検索してみましたが、問題を言葉で表現するのが難しいため、役に立ちませんでした。

以下に示すようにネストされた4つのdivがあり、すべて表示インラインブロックがあります。

-------- ---------------------------
| menu | | content holder div      |
| div  | | ----------- ----------- |
|      | | | content | | content | |
|      | | | div 1   | | div 2   | |
|      | | |         | |         | |
-------- | ----------- ----------- |
         ---------------------------

現在、メニュー div とコンテンツ div は、ロードされたデータに応じて柔軟な幅を持っています。いずれかのコンテンツ div が広すぎる場合は、次のようにします。

-------- ----------------------
| menu | | content holder div |
| div  | | -----------        |
|      | | | content |        |
|      | | | div 1   |        |
|      | | |         |        |
-------- | -----------        |
         | ------------------ |
         | | content div 2  | |
         | |                | |
         | |                | |
         | ------------------ |
         ----------------------

しかし、代わりに次のようになります。

--------
| menu |
| div  |
|      |
|      |
|      |
--------
---------------------------------
| content holder div            |
| ----------- ----------------- |
| | content | | content div 2 | |
| | div 1   | |               | |
| |         | |               | |
| ----------- ----------------- |
--------------------------------|

メニュー div の高さが、コンテンツが読み込まれたことを隠すのに十分な場合、非常に混乱します。また、メニュー div の幅を固定したままにすることは、明確な最後の手段としてのみ考慮されます。ただし、それが役立つ場合は、インライン ブロックの代わりに div をフロートにすることもできます。

図のようにレイアウトを維持する簡単な方法を知っている人はいますか。2? 他のコンテンツ div が非表示の場合、図 2 のようにいずれかのコンテンツ div が収まる場合でも、これが発生することをテストしました。

編集：

http://jsfiddle.net/pzHhL/1/

4

2 に答える 2

2

div「コンテンツホルダーdiv」を簡単かつ簡単に追加max-widthします。数字を提供できましたが、jsfiddleを提供しませんでした。

于 2013-05-20T13:07:21.060 に答える
1

それらをフロートに切り替えると、探しているレイアウトを維持するのに役立ちます

http://jsfiddle.net/duncan/pXdDy/

内部コンテンツの div を与える

min-width:48%;
margin:1%;
float:left;

コンテンツがそれらを押し下げるのに十分な幅になるまで、それらを隣り合わせに座らせます

于 2013-05-20T13:22:39.590 に答える