Question

我有一个包含div而不限制其子div的宽度。当我在容器和子容器上都有一个设定的宽度时，div一直延伸到屏幕的整个宽度。为什么会这样呢？我没有任何定位或浮动。

请查看我的HTML：

<ul class="tabs_commentArea">
    <li class=""><a href="#" class="">Starstream</a></li>
    <li class=""><a href="#" class="">Comments</a></li>
</ul>

<div id="paneWrap">
<div class="panes_comments">
    <div class="comments">member pane 1</div>
    <div class="comments">member pane 2</div>
    <div class="comments">member pane 3</div>
</div>

我的CSS，至少它的相关部分：

#MembersColumnContainer {
    width: 590px;
    float: left;
    padding-right: 0px;
    clear: none;
    padding-bottom: 20px;
    padding-left: 2px;
}

ul.tabs_commentArea { 
    list-style:none; 
    margin-top: 2px !important; 
    padding:0;  
    border-bottom:0px solid #666;   
    height:30px;
}

ul.tabs_commentArea li {
    text-indent:0;
    margin:  !important;
    list-style-image:none !important;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    float: right;
}

#paneWrap {
    border: solid 3px #000000;

}

.panes_comments div {
    display: ;
    padding: px px;
    /*border:medium solid #000000;*/
    height:150px;
    width: 588px;
    background-color: #FFFF99;
}

Answer 1

您可以在max-width元素中的任意一个或两个元素上设置div，以防止其扩展：

#containerDiv {
    min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
    width: 50%; /* defines the normal width of the div */
    max-width: 700px; /* prevents the div expanding beyond 700px */
}

也可能是您允许div的溢出内容为visible，而不是hidden（或auto）。但是如果没有标记和css的具体例子，那就很难猜到。

Answer 2

通常给予元素布局非常简单（总是假设您对浮动，定位和盒子模型有很好的理解），并且在大多数情况下，您不必使用max-min-width来控制元素。页。

我的两分钱：如果我是你，我会开始剥离代码（从！important规则开始），看看问题什么时候解决了。像这样解构代码是查找错误的好方法。

抱歉，我无能为力，但我不愿意提供建议，因为您提供的代码显示了其他可能导致您的问题的其他内容（例如必须使用！重要）。

：d

Answer 3

我弄明白了这个问题。在css中调用的文件与另一个具有相同名称的外部css文件冲突。谢谢大家的帮助。

我的div正在打破它的容器div

3 个答案: