将 3 张图片与页面的其余部分对齐答案

【问题标题】：Align 3 pictures in line to rest of the page将 3 张图片与页面的其余部分对齐
【发布时间】：2017-05-25 05:51:11
【问题描述】：

我试图将三张图片并排放置在一行中，每张图片下方都有一个标题和说明，我希望右侧和左侧的图片与页面的其余部分对齐，具有 4% 的内边距，就像上面的标题和段落，中间的就是在中间。

但是每当我将内边距设置为 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>

【问题讨论】：

标签： html css image alignment

【解决方案1】：

设置 box-sizing 似乎可以解决您的问题。

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

见sn-p

.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>

【讨论】：

【解决方案2】：

这里发生的情况是填充被添加到宽度中，因此总大小比页面宽。

4% + 33.3% + 4% + 33.3% + 4% + 33.3% + 4% = 超过 100%。

将你的 33.3% 降低到 28%，它会起作用 - 如下所示。

.full-width{
    width: 100%;
    margin: 0 auto;
}
.half-width{
	width: 50%;
	float: left;
}
.third-width{
	width: 28%;
	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>

【讨论】：