0
我的笔: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%;
}
由于您的列宽度为33%,因此调整窗口大小时应该如何得到预期的结果? – fcalderan 2015-02-05 16:51:09
我建议在面板上添加一个“min-width”,并且你必须使用移动中断点。 – Stickers 2015-02-05 16:55:23