css 布局里面有网格的布局grid,由于浏览器支持得不是太好。
相对grid,flex 要比它好一点,除了万年的IE除外,flex布局在移动端已经可以采用了。对IE来讲,IE8-9,采用了flex布局基本上不能考虑进去
最近经常做nxm列的图片布局。突然想到 inline-block 去做,需求要求居中,又要布局图片对齐。发现没处理好 inline-block,会有点小问题。于是就改用了比较传统float 浮动做法去做。下面大概示意图草图如下。
我们发现这种需求布局场景很多。再比如2x2的,3x3的
例如 京东商城这种左右2张图片的效果。
下面带着实现去实现一下。
这种类似一个列表的组件,采用css的时候,会声明一下列表的项,里面对应的每一项作为列表项的项。
例如:声明 这样一个div,将其标记列表组件。
<div class="ui-list">
</div>
然后再声明列表项
<div class="ui-list">
<div class="ui-list-item"></div>
</div>
这样就类似一个以列表组件的组织结构
<List>
<ListItem />
</List>
然后根据需求计算每一个列表项的宽度。例如 3列的,每一个项的宽度为 33.333%,如果是2列,宽度则为50%。
看以下的效果。
要实现居中可以采用
text-align: center;
margin:0 auto;
还有一种做法,将div的增加左右2边的间距。这样会让列表的容器div处于居中。
.ui-list{
margin-left: 10%;
margin-right: 10%;
}
总的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3x2</title>
</head>
<style>
.ui-list{
margin-left: 10%;
margin-right: 10%;
}
/*设置3列*/
.ui-list-item{
width: 33.33%;
border: 1px solid red;
float: left;
height: 200px;
box-sizing: border-box;
padding: 10px 10px;
}
.ui-list-item:after{
content: '';
display: block;
width: 100%;
height: 180px;
background-color: green;
}
/*清除浮动*/
.ui-list:after{
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="ui-list">
<div class="ui-list-item"></div>
<div class="ui-list-item"></div>
<div class="ui-list-item"></div>
<div class="ui-list-item"></div>
<div class="ui-list-item"></div>
<div class="ui-list-item"></div>
</div>
<h1 style="margin-left: 10%;">底部分割线</h1>
</body>
</html>