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;
}

防止浮动列在另一列下进行换行

1 个答案: