Question

我的代码存在问题，其中我有3个Div，（1是一个大的，第二个是第1和第3个div之间的空白，第3个div是小的）

全部3不包含任何内容

没有h1和p标签，Divs的位置（在我的屏幕上）很好（所需）但是在添加标签之后，位置会发生变化（Divs会下降并做一些奇怪的事情）

没有标签的代码（可能仅适用于1366x768屏幕）

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700';

body {
	font-family: 'Montserrat', sans-serif;
	background-color: #0C0C0C;
}
.container {
	color: black;
	display: inline-block;
	margin-left: 4%;
}
.frame1 {
	display: inline-block;
	color: white;
	background-color: #0C0C0C;
	width: 864px;
	height: 535px;
	border-radius: 5px;
	border: solid 3px white;
	margin-left: 36px;
}
.space {
	background-color: #0C0C0C;
	width: 50px;
	height: 425px;
	margin-top: 4%;
	border-radius: 5px;
	display: inline-block;
	padding-top: 125px;
}
.frame2 {
	display: inline-block;
	background-color: #0C0C0C;
	width: 350px;
	height: 535px;
	margin-top: 4%;
	border-radius: 5px;
	border: solid 3px white;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Testing</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
			<div class="frame1">
				
			</div>
			<div class="space">
			</div>
			<div class="frame2">
				
			</div>
	</body>
</html>

＆＃13;

我只在div中添加H1和P标签，并且位置混乱

感谢帮助

Answer 1

尝试将vertical-align: top添加到内联块元素：

.frame1, .frame2, .space {
   vertical-align: top;
}

然后，您可能需要使用4％的顶部边距来使它们在顶部对齐（我注意到.frame1缺少顶部边距）。

Answer 2

我建议将float:left;添加到每个div中。如果您可以提供要插入的文本或它应该如何作为最终目标，那么它将会很有帮助。＆＃39;导致添加浮动 - divs不会掉线。

Answer 3

.space {
 width: 50px;
 display: inline-block;
 }

您不需要空间高度和填充。你的作品很好。

并且您已经修复了帧宽，因此当屏幕大小为1310px时它将会中断快乐的编码

HTML，CSS Divs位置很好而没有内容但是在添加H1和P标签之后，Position Messes Up

3 个答案: