61,111
社区成员
发帖
与我相关
我的任务
分享
*{margin0;padding:0;}
.box { margin-bottom:-10000px; padding-bottom:10000px;float:left; width:300px;display: inline-block; margin-right:15px;}
.wrapper{ width:100%;overflow:hidden;}
.bgcolor1{ background:#999}
.bgcolor2{ background:#888}
.bgcolor3{ background:#777}
.bgcolor4{ background:#666}
.bgcolor5{ background:#555}
.bgcolor6{ background:#444}
<div class="wrapper">
<div class="box bgcolor1">
<h1>第一列</h1>
<p>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</p>
</div>
<div class="box bgcolor2">
<h1>第二列</h1>
<p>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</p>
</div>
<div class="box bgcolor3">
<h1>第三列</h1>
<p>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</p>
</div>
<div class="box bgcolor4">
<h1>第四列</h1>
<p>内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4</p>
</div>
<div class="box bgcolor5">
<h1>第五列</h1>
<p>内容5</p>
</div>
<div class="box bgcolor1">
<h1>第六列</h1>
<p>内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6</p>
</div>
<div class="box bgcolor2">
<h1>第七列</h1>
<p>内容.</p>
</div>
<div class="box bgcolor3">
<h1>第八列</h1>
<p>内容.</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.box
{
width: 200px; height: 200px;
/*margin: 0;*/
border: 1px solid black;
display: inline-block;
font-size: 14px;
vertical-align: top;
}
.wrapper
{
font-size:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<h1>第一列</h1>
<p>内容</p>
</div>
<div class="box">
<h1>第二列</h1>
<p>内容.</p>
</div>
<div class="box">
<h1>第三列</h1>
<p>内容.</p>
</div>
<div class="box">
<h1>第四列</h1>
<p>内容.</p>
</div>
<div class="box">
<h1>第五列</h1>
<p>内容.</p>
</div>
<div class="box">
<h1>第六列</h1>
<p>内容.</p>
</div>
<div class="box">
<h1>第七列</h1>
<p>内容.</p>
</div>
<div class="box">
<h1>第八列</h1>
<p>内容.</p>
</div>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
.box
{
width: 250px;
margin-left: 20px;
float: left;
display: inline;
padding: 20px;
}
.wrapper
{
overflow: hidden;
width: 100%;
position: relative;
}
.box
{
padding-bottom: 220px;
margin-bottom: -200px;
background: #89ac10;
}
.bottom
{
position: absolute;
bottom: 0;
height: 20px;
width: 250px;
background: #89ac10;
margin-left: -20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<h1>
第一列</h1>
<p>
内容</p>
<div class="bottom">
</div>
</div>
<div class="box">
<h1>
第二列</h1>
<p>
内容.</p>
<div class="bottom">
</div>
</div>
<div class="box">
<h1>
第三列</h1>
<p>
内容.</p>
<div class="bottom">
</div>
</div>
</div>
</body>
</html>