html三列图片布局,如何实现这种三列布局?

首先贴一个 现代浏览器里面可以满足的例子

.list-container {

padding: 15px;

background: red;

}

.list-container:after{

content: ' ';

display: table;

clear: both;

}

.list-container li {

display: block;

float: left;

box-sizing: border-box;

padding: 15px;

list-style: none;

width: 33.33%;

background:blue;

}

.list-container li img{

width: 100%;

}

• 

• 

• 

• 

• 

• 

• 

• 

• 

要实现这些还有几个注意点:

父亲 容器 .list-container 上要有一个和儿子一样的padding

爸爸儿子的 box-sizing: border-box; 记得要设置

img 的图片要等高宽要适合，这个例子里面 宽度我给定了100%确保它不会超出外面。高度么就自动了。

li float过以后要记得清除。(list-container的clear:both这部分。)

类似的事情还有不少框架可以省心的去干。例如bootstrap

ps：如果你的图片高宽不可控。但是你又想显示成一样的高度，那么你可以用一个可控高宽的的透明图片，作为img src 然后给img设置真实的推盘内容为背景，记得要把背景的background-size设置成cover(这个将会裁切你的图片)或者contain(设这个的话还要再给一个background-color 防止图片进去视觉上的边距不想等。)，然后加上background-repeat: no-repeat; background-position: center;