Question

我在包装器中有3个div：

<div id="wrapper">

<div id="leftbar">
Lorem ipsum dolar sit amet
</div><!--LEFTBAR-->

<div id="middle">
Lorem ipsum dolar sit amet
</div><!--middle-->

<div id="rightbar">
Lorem ipsum dolar sit amet
</div><!--RIGHTBAR-->

</div><!--wrapper-->

'leftbar'和'middle'都向左浮动，而'rightbar'向右浮动。 'wrapper'设置了height:100%; clear:both;。

但是，如果'middle'中有大量文本或内容，则会溢出'wrapper'div。我正在努力弄清楚为什么会这样。

我的CSS是：

#wrapper {
    width: 1000px;
    height: 100%;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
}

#leftbar {
    float:left;
    width: 150px;
    min-height: 450px;
    padding: 5px;
}

#middle {
    float:left;
    height: 100%;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

#rightbar {
    float:right;
    width: 200px;
    min-height: 450px;
    padding: 5px;
}

感谢任何建议！

Answer 1

将overflow:auto添加到#textcontent并移除height:100%表单#textcontent和#maincontent

Answer 2

在您编辑问题时，我刚刚知道它是如何溢出的，这是因为您使用height: 100%;，因此您的div不会超过视口，因此请使用height: auto;代替使用overflow: auto;为#textcontent代替clear: both;，而穆萨告诉你这样做..（用萤火虫检查）

Answer 3

这是带有一些小添加的css文件：

文字对齐您的酒吧
包装中的宽度设置为1000px，因此所有px均在条形图中均匀分布。

#wrapper {
width: 1000px;
height: auto;
margin:auto;
padding: 30px;
margin-top: 40px;
background-color:#FFF;
color:#000;
border: 2px solid #828fc4;
clear:both;
overflow:auto;
}

#leftbar {
float:left;
width: 250px;
padding: 5px;
text-align:center;
}

#middle {
float:left;
width: 400px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px dotted #2B308C;
border-left: 1px dotted #2B308C;
text-align: center;
}

#rightbar {
float:right;
width: 250px;
padding: 5px;
text-align:center;
}

只是我的两分钱

Answer 4

如果您只需要文本，请尝试使用CSS3列。

Answer 5

添加溢出属性并将高度更改为自动。

#wrapper {
    width: 1000px;
    height: auto;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
    overflow:hidden;
}
#middle {
    float:left;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

3列html模板 - 内容溢出虽然两者都清楚，高度是100％

5 个答案: