页面中心第一行上的3个图像和第二行上的三个图像

我希望在第一行上有3个图像，在第二行上有三个图像，并希望它们位于页面的中间

* { box-sizing: border-box; }
ul { 
list-style: none; 
font-size: 0; 
margin: 0; 
padding: 0; 
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }

<ul>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>

有很多方法可以做到这一点，例如：

ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

https://jsfiddle.net/d6wn79pv/4/

或

ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
text-align: center;
}
ul li {
flex-grow: 1;
width: 33%;
}

https://jsfiddle.net/d6wn79pv/9/

使用flexbox：

* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
li{
width:30%;
margin:3px auto;
}

<ul>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
</ul>

看看这个。

<!DOCTYPE html>
<html>
<style>
* { box-sizing: border-box; }
ul { 
list-style: none; 
font-size: 0; 
margin: 0; 
padding: 0; 
text-align: center; }
li {
width: 31%;
display:block;
float:left;
margin:3px;
}
</style>
<body>
<ul>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>  
<li><img src="http://lorempixel.com/100/100/cats/" /></li>  
<li><img src="http://lorempixel.com/100/100/cats/" /></li>  
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
</ul>
</body>
</html>

只需使用flex 即可完成

<ul class="here">
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>

.here{
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.here li {
width: 32%;
}
.here li img{
width: 100%;
}

更改.herewidth以自动调整内容的大小

相关内容

最新更新

热门标签：