如果设备是移动设备，我想垂直包裹三个 div。我遇到的问题是分隔所有三个 div 的边框。当在大型显示器上查看此站点时，将有 3 个内联 div，带有 2 个边框，以 100% 的高度分隔列。当这些 div 在小屏幕上换行时，边框不会走到底部。有没有办法做到这一点，以便当这些 div 环绕时，两个边框都会接触到地板？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
width:100%;
}
#left {
float:left;
width:33%;
height:100%;
min-width:300px;
border-right:1px solid
}
#middle {
float:left;
width:33%;
height:100%;
min-width:300px;
border-right:1px solid;
}
#right {
float:left;
width:33%;
height:100%;
min-width:300px;
border-right:1px solid;
}
</style>
</head>
<body>
<div style="height:100%">
<div id="left">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div id="middle">
<div>2</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div id="right">
<div>3</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</div>
</body>
</html>
最佳答案
删除
height:100%;
从#left、#middle、#right 和定义一些边距，例如:
margin-bottom:10px;
JsFiddle:http://jsfiddle.net/KsvgV/1/
关于css - 如何为移动设备包装三个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22087556/