2

親 div 内に子 div を配置したいのですが、子 div が親 div の外にオーバーフローしています。問題をよりよく理解するために、ブラウザで以下のコードを実行してください。

最も内側の div を水平に配置したいのですが、外側の div は内側の div にちょうど収まるようにします。

 <div class='list' id='list1' style='padding: 1px; border : 5px groove; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto; ' >
    <div class='tuple tuple1' id='tuple1_1' style='padding: 2px; border : 1px solid; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
        <div class='elmnt elmnt1 elmnt1_1' id='elmnt1_1' style='padding: 2px; border : 1px dotted; position: relative; left: 6px;  min-width: 3px; width: 100; min-height: 3px; height: auto;' >
            <div class='list' id='list2' style='padding: 1px; border : 5px groove; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto; ' >
                <div class='tuple tuple2' id='tuple2_1' style='padding: 2px; border : 1px solid; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
                    <div class='elmnt elmnt2 elmnt2_1' id='elmnt2_1' style='padding: 2px; border : 1px dotted; position: relative; left: 6px;  min-width: 3px; width: 100; min-height: 3px; height: auto;' >jdk-7u11-linux-i586.rpm</div>
                    <div class='elmnt elmnt2 elmnt2_2' id='elmnt2_2' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >107M </div>
                    <div class='elmnt elmnt2 elmnt2_3' id='elmnt2_3' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >nadeem </div>
                    <div class='elmnt elmnt2 elmnt2_4' id='elmnt2_4' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >2013-01-23 </div>
                    <div class='elmnt elmnt2 elmnt2_5' id='elmnt2_5' style='padding: 2px; border : 1px dotted; position: absolute; left: 430px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >00:53 </div>
                </div>
            </div>
        </div>
    </div>
</div>
4

3 に答える 3

1

これをスクロールしたい場合は、親として機能する div にオーバーフロー属性を追加する必要があります。

たとえば、追加

overflow: auto;

#list2 に追加すると、すべての子がその中をスクロールします。

于 2013-06-03T12:54:38.733 に答える
0

他の人が提案したことに同意します。絶対配置を使用することが、フローを予想とは異なるものにしています。DIV を position:relative と float:left の子 DIV にしてみます。実際、ここで作成しようとしているのが水平メニューであると仮定すると、ネストされた DIV の代わりに順序付けられていないリストを使用して構造を提供します。このようなもの：

<div id="menu">
<ul style="list-style-type:none;">
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 1</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 2</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 3</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 4</li>
</ul>
</div>

ハイパーリンクや画像を追加して機能させることができます。希望どおりに表示されたら、メンテナンスを容易にするために、インライン CSS を別のスタイルシートに移動できます。

注: float プロパティを使用する場合、要素とその親は position:relative で、幅を指定する必要があります。

于 2013-06-03T13:51:33.707 に答える