Question

我有两个浮动的DIV（两列）嵌套在“clear-float”-DIV中，它本身嵌套在一个居中的DIV（“包装”DIV）中。

<div id="content">
    <div class="block2">
        <div id="slot_left">
            CONTENT-LEFT
        </div>
        <div id="slot_right">
            *CONTENT-RIGHT*
        </div>
    </div>
</div>

右列设置了min-width和max-width CSS选项。但是包装器DIV也有min-width和max-width，它总是扩展到最大宽度。

#content {
    min-width: 300px;
    min-height: 80px;
    max-width: 350px;
    margin: 0 auto;
    background: #c00;
}
.block {
    overflow: hidden;
    _overflow: visible;
    _overflow-x: hidden;
    _height: 0;
}
#slot_left {
    width: 200px;
    background: #ff0;
    float: left;
    position: relative;
}
#slot_right {
    float: left;
    background: #cc0;
    min-width: 100px;
    max-width: 150px;
    position: relative;
}

这是什么原因？我希望包装器DIV具有所需的最小宽度，但要以屏幕为中心。

Here是一个小提琴。

Answer 1

使用display:inline-block

为什么会发生这种情况？ div默认是块级元素，因此当您提供max-width时，它始终会遵守它以占用最大区域。 ...

<强> http://jsfiddle.net/sHB7g/3/

<强> CSS

#content {
    min-width: 300px;
    min-height: 80px;
    max-width: 350px;
    margin: 0 auto;
    background: #c00;
    display:inline-block
}
.block {
    display:inline-block;
    overflow: hidden;
    border:1px solid #000;
}

Answer 2

http://jsfiddle.net/sHB7g/1/

#content {
    display: inline-block;
}

然后添加了一个内容包装器

#contentwrapper {
    text-align: center;
}

html就像这样

  <div id="contentwrapper">
      <div id="content">
        <div class="block">
            <div id="slot_left">
                CONTENT-LEFT
            </div>
            <div id="slot_right">
                *CONTENT-RIGHT*
            </div>
        </div>
    </div>

包装DIV的最小宽度不起作用

2 个答案: