Question

我正在使用此代码...

<div id="app">
    <div id="app-actionbar">
        topbar
    </div>
    <div id="app-userinfo">
        sidebar
    </div>
    <div id="app-content">
        content
    </div>
</div>

/** Styling **/

#app {
    border:1px solid #666;
}

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
    margin-top:10px;
}

#app-content { 
    float: left;
    color: #333;
    background: #FFFFFF;
    height: 350px;
    width: 725px;
    display: inline;
}

#app-userinfo { 
    color: #333;
    background:#F2F2F2;
    height: 350px;
    width: 175px;
    float: left;
}

但是，它不像我想要的那样工作。

我想在它周围添加一个边框，但它不起作用（并且它将内容向下移动）。

enter image description here

Answer 1

您需要清除#app中的浮动元素。尝试将overflow:hidden;或overflow:auto;添加到#app。这将使边界包裹整个DIV。

以上是您上面的代码段与指定的overflow:hidden的实时 jsfiddle 链接：的 http://jsfiddle.net/AhZAU/

margin-top:10px上的#app-actionbar正在创建顶部的间距“（及其向下移动内容）”。删除边距，空格将不再存在：http://jsfiddle.net/AhZAU/1/

Answer 2

QuirksMode Way©：

#app {
    border:1px solid #666;
    overflow: auto;
    width: 100%;
}

http://jsfiddle.net/CePt6/

来自文章：

如果你想添加一个边框围绕所有花车（即周围的边界）容器）......

注意

就顶部的差距而言，您可以通过从margin-top: 10px;移除#app-actionbar来消除这种差距。

#app-actionbar { color: #333; width: 900px; float: left; height: 45px; background: #D9D9DC; }

http://jsfiddle.net/CePt6/2/

修改

现在，如果您的意思是内容块向下移动，请使#app的宽度与#app-actionbar的宽度相同：

#app { border:1px solid #666; overflow: auto; width: 900px; }

http://jsfiddle.net/CePt6/3/

Answer 3

这应该可以解决问题。 jsfiddle.net demo

#app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}

#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}

#app-content { 
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}

#app-userinfo { 
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
clear: left;
}

Answer 4

只是为了咯咯笑，尝试了但是有一些布局变化。检查它是否有帮助。（demo here）

<div id="app">
    <div id="app-actionbar">
        topbar
    </div>
    <div id="app-userinfo">
        sidebar
    </div>
    <div id="app-content">
        content
    </div>
</div>

CSS：

#app {
    border:1px solid #666;
    clear:both;
    position:absolute;
}

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
    margin-top:0px; 
}

#app-content { 
    float: left;
    color: #333;
    background: red;
    height: 350px;
    width: 725px;
    display: inline; 

    left:200px;
    top:75px;
}

#app-userinfo { 
    color: #333;
    background:#F2F2F2;
    height: 350px;
    width: 175px;
    float: left;
    top:65px;

}

Answer 5

以下是您可以做的事情：

将以下行添加到#app div中，如下所示：

width:900px;
min-height: 300px;
overflow:auto;

以上是为了在内部内容增加时自动扩展外部div。

然而，这将限制旧版本的IE，因为它们没有min-height属性。

CSS / HTML布局帮助

5 个答案: