0

我在一个包装器中有 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;设置。

但是，如果“中间”中有大量文本或内容，则会溢出“包装器”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;
}

任何建议表示赞赏！

4

5 回答 5

2

添加和删overflow:auto​​除表单和#textcontentheight:100%#textcontent#maincontent

于 2012-12-10T05:08:04.507 回答
1

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

  • 为您的栏的文本对齐
  • 包装器中的宽度设置为 1000 像素，因此所有 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;
}

只是我的两分钱

于 2012-12-10T05:37:53.130 回答
1

当你编辑你的问题时，我才知道它是如何溢出的，这是因为你正在使用height: 100%;，所以你的 div 不会超过视口，所以使用height: auto;而不是像 Musa 告诉你的那样使用overflow: auto;for而不是......（检查带萤火虫）#textcontentclear: both;

于 2012-12-10T05:01:40.777 回答
0

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

于 2012-12-10T05:02:14.127 回答
0

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

#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;
}
于 2012-12-10T05:09:04.073 回答