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

2

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

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

于 2013-06-03T13:23:13.127 回答
1

如果你想让它滚动，你需要向作为父级的 div 添加一个溢出属性。

例如添加

overflow: auto;

到 #list2 会导致所有子项在其中滚动。

于 2013-06-03T12:54:38.733 回答
0

我同意其他人的建议。使用绝对定位是使流程与您的期望不同的原因。我会尝试让 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 并且应指定宽度。

于 2013-06-03T13:51:33.707 回答