Question

因此，如果您查看第二张图像，当文本跨越两行时，它会向上移动。也许这是对我缺少的div容器做些什么？似乎找不到合适的解决方案。我不是超级HTML精明但我确定这是一个简单的修复？ ..help！

	#wrapper {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}

	
	.thumb {
		position: relative;
		display: inline-block;
		width: 17.6%;
		height: auto;
		box-sizing: border-box;
		margin: 10px 1%;
		padding: 0;
		text-decoration: none;
		
	}
	.thumb p {
		font-family: "Helvetica", helvetica;
		color: #aaa;
		margin-left: 0em;
		margin: 0.5em;
	}
	.thumb img {
		width: 100%;
		height: 230px;
		display: block;
    	margin: 0 auto;
	}

<body style="margin: 0px;">

<div id="wrapper">
	<h1>GALLERY</h1>
	<h2>LENDING LIBRARY</h2>
	
	<a id="Altamont Wet WR" class="thumb" href="openwindow-https://www.urbanelectricco.com/altamontwall.html">
		<img src="thumbs/altamontwall_mtn.jpg" />
		<p>Altamont Wet WR</p>
		<hr>
		<h3>'Kromezone' Powder Coat, Clear Glass</h3>
	</a>	
	
	
	<a id="Archibald" class="thumb" href="openwindow-https://www.urbanelectricco.com/archibald.html">
		<img src="thumbs/archibald_mtn.jpg" />
		<p>Archibald WR</p>
		<hr>
		<h3>Bronze Finish, Clear Glass & Black Finish, Clear Glass
		</h3>
	</a>	
	
	
	<a id="Belle Meade" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeade.html">
		<img src="thumbs/bellemeade_mtn.jpg" />
		<p>Belle Meade WL</p>
		<hr>
		<h3>Vintage Finish</h3>
	</a>
	
	<a id="Belle Meade Double" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeadedouble.html">
		<img src="thumbs/bellemeadedouble_mtn.jpg" />
		<p>Belle Meade Double WL</p>
		<hr>
		<h3>Polished Nickel Finish</h3>
	</a>

Answer 1

在所有缩略图中使对齐方式相同的最佳方法是将以下内容添加到.thumb类中：

vertical-align:top;

出现问题的原因是任何div的标准垂直对齐是基线（在底部）。当你的文字进入第二行时，它会自然地增加该元素的高度（并且是所有其他标记的高度的两倍）并向上推动该特定div中的所有其他内容。

希望有所帮助！

当文本在两行时，容器向上移动

1 个答案: