html - 将 3 张图片与页面的其余部分对齐

Question

我试图将三张图片并排排成一行，每张图片下面都有一个标题和描述，我希望左右两张图片与页面的其余部分对齐，其中有一个 4% 的填充，就像上面的标题和段落一样，中间的就在中间。

但是每当我将 padding 设置为 4% 时，右边的就会浮在前两个下面..

.full-width{
    width: 100%;
    margin: 0 auto;
}
.half-width{
	width: 50%;
	float: left;
}
.third-width{
	width: 33.3333%;
	float: left;
}

img{
    height: 30%;
    width: auto;
}

h1, h3{
    margin: 2% 4%;
}

p{
    text-align: justify;
}

h2{
    text-align: center;
}

h2, p, img{
    margin: auto;
    display: block;
    padding: 2% 0%;
}

#right, #left{
    padding: 0 4%;
    display: block;
}

<h3>text text text 
		</h3>

		<div class="full-width">
		
		<div class="third-width" id="left">
			<img src="img/gary.jpg" alt="Gary">
			<h2>Gary</h2>
			<p>text text</p>
		</div>
		
		<div class="third-width" id="middle">
			<img src="img/howard.jpg" alt="Howard">
			<h2>Howard</h2>
			<p>text text</p>
		</div>

		<div class="third-width" id="right">
			<img src="img/mark.jpg" alt="Mark">
			<h2>Mark</h2>
			<p>text text</p>
		</div>

		</div>
	</main>
</html>

Answer 1

设置框大小似乎可以解决您的问题。

#right, #left{
    padding: 0 4%;
    display: block;
    box-sizing: border-box;
}

查看代码片段

.full-width{
    width: 100%;
    margin: 0 auto;
}
.half-width{
	width: 50%;
	float: left;
}
.third-width{
	width: 33.3333%;
	float: left;
}

img{
    height: 30%;
    width: auto;
}

h1, h3{
    margin: 2% 4%;
}

p{
    text-align: justify;
}

h2{
    text-align: center;
}

h2, p, img{
    margin: auto;
    display: block;
    padding: 2% 0%;
}

#right, #left{
    padding: 0 4%;
    display: block;
	box-sizing: border-box;
}

<h3>text text text 
		</h3>

		<div class="full-width">
		
		<div class="third-width" id="left">
			<img src="img/gary.jpg" alt="Gary">
			<h2>Gary</h2>
			<p>text text</p>
		</div>
		
		<div class="third-width" id="middle">
			<img src="img/howard.jpg" alt="Howard">
			<h2>Howard</h2>
			<p>text text</p>
		</div>

		<div class="third-width" id="right">
			<img src="img/mark.jpg" alt="Mark">
			<h2>Mark</h2>
			<p>text text</p>
		</div>

		</div>