无法将浮动div标签放在所需的位置

Question

我的网页上有5个<div>个标签。

1. 容器<div>
2. 标题<div>
3. 左侧小组<div>
4. 中间小组<div>
5. 右侧小组<div>

左侧面板，中间面板和右侧面板<div>使用CSS float left并排放置。现在问题出现在获取的数据显示在中间面板<div>中，并且其高度根据获取的数据量开始增加。左侧面板<div>保持原样，但右侧面板<div>会更改其边距，如图所示。



此图片说明了具体情况。下面是我的CSS。

*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
 }

.container{
    margin:0 auto;
    padding:0;
}

.header{
   height:100px;
   width:100%; 
}

.left_panel{
    width:130px;
    float:left;
}


.middle_panel{
    width:70%;
    float:left;
}

.right_panel{
    float:right;
    width:130px;
}

请帮我解决这个问题。感谢。

Answer 1

我认为问题是由于您的左侧，中间和右侧面板的组合宽度超出了页面宽度而引起的。

尝试类似我的小提琴，我将左右面板的宽度设置为15％，因此在任何情况下都不会超过100％

.left_panel {
  width:15%;
  float:left;
  background: yellow;
}

.middle_panel {
  width:70%;
  float:left;
  background: blue; 
}

.right_panel {
  float:right;
  width:15%;
  background: pink;
}

http://jsfiddle.net/WPgt9/

Answer 2

希望这有帮助

<强> HTML

 <div class="container">
    <div class="header">Header</div>
    <div class="left_panel">Left</div>
    <div class="middle_panel">
       Middle
           </div>
    <div class="right_panel">Right</div>
</div>

<强> CSS

*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
 }

.container{
    margin:0 auto;
    padding:0;

}

.header{
   height:100px;
   width:100%; 
    background-color:green;
}

.left_panel{
    width:15%;
    float:left;
    background-color:red;
    height:400px;
}


.middle_panel{
    width:70%;
    float:left;
    background-color:blue;
    height:500px;
}

.right_panel{
    float:right;
    width:15%;
    background-color:red;
    height:400px;
}

小提琴 http://jsfiddle.net/WPgt9/9/