html - 如何在屏幕的两侧放置两个 div，HTML，CSS

Question

如何将两个 div 放置在屏幕两侧的同一行上？ IE。一个向左浮动，另一个向右浮动？当我尝试这样做时，包含的 div 被切成两半。

这是我的代码:http://jsfiddle.net/xy0pj0f9/

<div class="wrapper">
  <div class="top-panel-sub">
    <div class="port-name">
      <h3>Name</h3> 
    </div>
    <div class="admincp-button">
      <img src="themes/images/loginsml.png"/>
    </div>
  </div>
</div>

.top-panel-sub {
background-color: #bf2f1b;
color:#fff;
padding-top:10px;
padding-bottom:10px;
padding-right:5px;
padding-left:5%;
font-family:Trajan-Pro-Bold;
}
.port-name {
    display:block;
    float:left;
}
.port-name h3{
    display:block;
}
.admincp-button {
    display:block;  
}

Answer 1

float 元素不提供任何堆栈流，因此您需要覆盖溢出规则以告知父元素的行为就好像 float 子元素没有 float 一样。

只需将 overflow : hidden; 或 overflow : auto; 添加到 .top-panel-sub 容器即可。

http://jsfiddle.net/xy0pj0f9/1/