Question

我想在父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>

Answer 1

将position属性设置为absolute会导致div崩溃。删除或更改属性，div将环绕内容。

http://jsfiddle.net/YMsR4/1/

Answer 2

如果你想要滚动它，你需要在div中添加一个overflow属性作为父级。

例如添加

overflow: auto;

到＃list2会导致所有孩子在其中滚动。

Answer 3

我同意其他人的建议。使用绝对定位是使流程与您的期望不同的原因。我会尝试制作DIV的位置：亲戚和漂浮：离开孩子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，并且应指定宽度。

使用CSS定位嵌套的div

3 个答案: