Question

我的目标是创建一个容器，里面有6个瓷砖卡，每个瓷砖卡上都有不同的内容。当我尝试将文本实现到其中一个div中时，它们下面的div都会向下移动。

Here's what it looks like when text is added.

我已经找了一个小时，我还没有找到解决方案。这是我的HTML：

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	</head>
	<body>
		<div id="header">
			<p class="textheader"><b>websitetitle |</b></p>
		</div>
		<div id="navbar">
			<div class="navitem">
				<p class="navtext"><b>Home</b></p>
			</div>
			<div class="navitem">
				<p class="navtext">Info</p>
			</div>
		</div>
		<div id="boxinfowrapper">
			<div id="preboxtextdiv">
				<h1 id="preboxtext">title for box cards:</h1>
			</div>
			<div id="boxcontainer">
				<div class="tilecard">
				<p class="boxtext">Hello</p>
				</div>
				<div class="tilecard">
				</div>
				<div class="tilecard">
				</div>
				<div class="tilecard">
				</div>
				<div class="tilecard">
				</div>
				<div class="tilecard">
				</div>
			</div>
		</div>
	</body>
</html>

CSS：

#header {
	background-color: #00ccff;
	width: 100%;
	height: 40px;
	display: inline-block;
	margin: 0px;
	margin-top: -10px;
	box-shadow: 0px 0px 0px 2px #50ADCC
}

body{
	margin: 0px;
}

.textheader {
	font-family: Verdana;
	color: #FFFFFF;
	margin-left: 10px;
	position: relative;
}

#navbar{
	width: 50%;
	height: 40px;
	background-color: white;
	position: relative;
	box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
	text-align: center;
	margin: 3px auto;
}

.navitem {
	width: 80px;
	height: 40px;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
}
.navitem:hover .navtext{
	color: #4dd2ff;
}
.navtext {
	color: black;
	margin-top: 10px;
	padding: 0px;
	font-family: Courier;
	font-size: 20px;
}

.tilecard {
	margin-top: 30px;
	width: 200px;
	height: 200px;
	background-color: lightgray;
	display: inline-block;
	position: relative;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	margin-right: 10px;
	margin-left: 10px
}
.tilecard:hover {
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	background-color: gray;
}

#boxcontainer {
	position: relative;
	width: 720px;
	height: 495px;
	background-color: white;
	text-align: center;
	margin: 0px auto;
	box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
#preboxtextdiv {
	width: 600px;
	height: 30px;
	position: relative;
	margin: 30px auto;
	text-align: center;
}
#preboxtext {
	color: #80bfff;
	font-family: Helvetica;
}

#boxinfowrapper {
	position: relative;
	width: 100%;
	height: 1000px;
	background-color: #f0f5f5;
	margin: 100px auto;
	box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
}

.boxtext {
	position: relative;
	vertical-align: top;
}

Answer 1

原因在于display: inline-block;这些容器 - 这将沿着它们的基线（=文本基线）垂直对齐这些元素。为避免这种情况，请添加

.tilecard {
  vertical-align: top;
}

这是小提琴：https://jsfiddle.net/z0731w5x/

Answer 2

默认vertical-align为baseline。如果没有文本，内联块元素的基线对应于其边界矩形的底部，而不是它通常包含的文本。

将瓷砖卡顶部对齐，一切顺利。

.tilecard {
    vertical-align: top;
}

Answer 3

#boxcontainer {
position: relative;
width: 720px;
height: 495px;

->height: auto;

background-color: white;
text-align: center;
margin: 0px auto;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}

试试这个

向div添加文本会将附近的div向下移动

3 个答案: