css - 最小高度和最小宽度不能很好地工作

Question

大家好，我有这个标记

<div id="content">
    <div id="left"></div>
    <div id="main"></div>
</div>

还有这个 css 文件

    #content{
    width:100%;
    min-width:1024px;
    height:100%;
    background-color:red;
}
#left{
    width:15%;
    height:100%;
    min-width:260px;
    float:left;
    outline:1px solid white;
}
#main{
    width:85%;
    height:100%;
    min-width:764px;
    display:inline-block;
    outline:1px solid green;
}

当我调整窗口主 div 大小并开始新行时，我希望当我调整窗口大小时 left 和 main div 是一行在 content 标签内

Answer 1

演示: http://jsfiddle.net/techsin/8gbB2/

问题出在内联 block 上。在 Css 中，内联元素就像字符，字符之间有空格，这些空格直接源自其字体大小。

所以如果你简单地将 font-size 设置为 0。它不会像那样崩溃。另外，假设这是整个代码。为了使高度发挥作用，您还应该输入如下内容:

html, 正文 {height:100%;}

.cont { min-width: 500px; font-size: 0; height: 500px;}
.left, .main {
    display: inline-block;
    height: 100%;
}

.left { width: 20%; background-color: red; }
.main { width: 80%; background-color: blue;  }

我想指出的第二件事...是您定义了两次宽度..这是毫无意义的，因为只考虑了最后一个，并且它取消了前一个。 min-width 和 width 属性将相互抵消，具体取决于最后定义的一个。