html - 4 图像 float 中心

Question

我遇到了困难。我希望我的横幅是这样的。

但是我的输出是这样的。

 #banner-sp{
    display: block;
}

#banner1 img{
    padding-bottom: 10px;
}

.ban1, .ban2{
    float: right;
    margin-left: auto;
    margin-right: auto;
}

<div class="container" id="banner-sp">
	<div class="row" id="banner1">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban1"></a>
	</div>
	<div class="row" id="banner2">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban2"></a>
	</div>
</div>

Answer 1

你可以用这个css实现它:

在img上使用padding来控制图片之间的距离。

banner-sp{
        display: block;
    }

    img{
        padding: 10px;
    }

.row {
  display: flex;
  justify-content: center;
}

<div class="container" id="banner-sp">
	<div class="row" id="banner1">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban1"></a>
	</div>
	<div class="row" id="banner2">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban2"></a>
	</div>
</div>