将3张图片对齐到页面的其余部分

Question

我试图将三张图片彼此相邻放在一行中，每张图片都有一个标题和descrpiction在它下面，我希望右边和左边的那张图片与页面的其余部分对齐，它有一个 4％的填充，就像上面的标题和parargaphs，中间的那个只是在中间。

但每当我将填充设置为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>

Answer 2

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

4% + 33.3% + 4% + 33.3% + 4% + 33.3% + 4% =超过100％。< / p>

将你的33.3％减少到28％，它会起作用 - 如下所示。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;