阻止一個浮動列線下破另一列

Question

我的筆：http://codepen.io/helloworld/pen/NPwGGG?editors=110
的jsfiddle：http://jsfiddle.net/dsf6tm4j/

當你調整窗口的大小，用左手欄下的超鏈接包裝右側立柱。

我該如何防止這種情況發生？

HTML

<div> 
<div class="panel"> 
    <div class="panel-header">Customers</div> 
    <div class="panel-body"> 
     <div class="panel-body-container"> 
      <div style="background:yellow;" class="col-2 imageContainer"> 
       <img src="http://s16.postimg.org/tqs90puwl/customer.png"></img> 
      </div> 

     <div class="col-2"> 
     <ul> 
      <li class="list-group-item"><a href="#">1Intel superior solutions finder</a></li>  
      <li class="list-group-item"><a href="#">2Intel superior solutions finder</a></li> 
      <li class="list-group-item"><a href="#">3Intel superior solutions finder</a></li> 
     </ul> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
    </div> 
</div> 
<div class="panel"> 
    <div class="panel-header">Personal Links</div> 
    <div class="panel-body">body</div> 
</div> 
<div class="panel"> 
    <div class="panel-header">Events</div> 
    <div class="panel-body">body</div> 
</div> 
    <div class="clearfix"></div> 
</div> 

CSS

body, html{ 
    padding:0; 
    margin:0; 
} 

* { 
    box-sizing: Border-box; 
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    border-radius: 0 !important; /* Remove rounded borders from whole layout */ 
} 

.panel-header{ 
    padding:5px; 
    background:navy; 
    color:white; 
} 

.panel-body{ 
    padding:5px; 
    background:aliceblue; 
    height:200px; 
    border:1px solid navy; 
} 

.panel{ 
    float:left; 
    width:33%; 
    background:white; 
    padding:10px; 
    } 

.panel-body-container{ 
    padding:5px; 

} 

.list-group-item{ 
    border:1px solid #ddd; 
} 

.clearfix { 
    clear: both; 
    height:1px; 
    overflow:hidden; 
    margin-bottom:-1px; 
    line-height:1%; 
    font-size:0px; 
} 

.col-2{ 
    float:left; 
    width:50%; 
} 

ul 
{ 
    list-style-type:none; 
    padding:0 0 0 10px; 
    margin:0; 
} 

ul li a{ 
    text-decoration:underline; 
    word-break: break-all; 
} 

.imageContainer { 
    width: 150px; 
    height: 150px;  
    overflow: hidden; 
    background: #ccc; 
    text-align: center; 
    line-height: 150px; 
} 
.imageContainer img { 
    max-width: 100%; 
    max-height: 100%; 

} 

Answer 1

看起來這是因爲您使用的是.imageContainer特定的像素寬度。請嘗試將其更改爲百分比：

.imageContainer { 
    width: 150px; /* Change to 50% */ 
    height: 150px;  
    overflow: hidden; 
    background: #ccc; 
    text-align: center; 
    line-height: 150px; 
}