Question

你好，我有markup

<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

#content的父母需要具有特定的身高。 Without a parent width / height in your original css, it breaks because it doesn't have a height or width to base off of.

如果删除基于百分比的尺寸并为其设定尺寸，则其儿童会正确浮动。如下所示：JSFiddle

#content{
    min-width:1024px;
    height: 100px;
    background-color:red;
}

Answer 2

<强>演示： http://jsfiddle.net/techsin/8gbB2/

问题在于内嵌块。在Css中，内联元素就像字符一样，字符之间有空格，直接来自字体大小。

因此，如果您只是将font-size设置为0.它不会像那样破坏。另外，假设这是整个代码。为了工作的高度，你也应该这样：

html, body {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属性将相互取消，具体取决于最新定义的属性。

Answer 3

检查这是否对您有所帮助。

在您向float: left提供#left后，只需删除display: inline-block，然后将margin-left:15%;添加到#main

并删除div's

的大纲

CSS

  #content{
    width:100%;
    min-width:1024px;
    height:100%;
    background-color:red;
}
#left{
    width:15%;
    height:100%;
    min-width:260px;
    float:left;
    background: #000
}
#main{
    margin-left:15%;
    height:100%;
  background: #ccc
}

http://codepen.io/anon/pen/LHGrB

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

3 个答案: