这种图片排列布局如何使用float完成？
如图，最终效果需要
But .......
float:left 会这样
求各位帮忙看下，目前本人知道把图片1----5放在一个div, 图片6单独一个div，但是有没有其他方法？？？？？谢谢
塞巴斯蒂安
9 years, 4 months ago
Answers
这个是现在比较常见的栅格布局了.float布局在这里比较麻烦,所以我还是写了一个利用display:inline-block属性布局的方法,大神轻喷.
<style type="text/css">
*{margin:0;padding:0;}
.row {
height: 150px;
font-size: 0;
}
.item {
box-sizing: border-box;
vertical-align: top;
height: 100%;
overflow-y: visible;
overflow-x: hidden;
background-color: maroon;
box-shadow: 4px 4px 0 #fff, -4px -4px 0 #fff,4px -4px 0 #fff, -4px 4px 0 #fff;
display: inline-block;
font-size: 20px;
color: #FFF;
text-align: center;
padding: 8px;
}
.col-1 {
width: 33.3333%;
}
.col-2 {
width: 66.66666%;
}
.col-5{
width:22.1333333%;
}
.row-1 {
height: 100%;
}
.row-2 {
height: 200%;
}
</style>
<body>
<div class="row">
<div class="item col-1 row-2">A</div>
<div class="item col-1 row-1">B</div>
<div class="item col-1 row-2">C</div>
</div>
<div class="row" >
<div class="item col-5 row-1">D</div>
<div class="item col-5 row-1">E</div>
<div class="item col-5 row-1">F</div>
</div>
</body>
其实还有很多种方法的,刚好前一段时间我在知乎上提了一个关于这种布局的问题,lz可以 点击这里 参考一下,其实我这个布局也是参考里面一位答者的.
走边路诺八嘎
answered 9 years, 4 months ago
