Question

我目前正在尝试开发一个网站。目前我正试图让设计失效，但它给了我相当艰难的时间。

我有5个div。每个包含两个span，column1和column2。 div是块，跨度是内联块。但是，由于某种原因，div不想垂直对齐。任何帮助表示赞赏。还有，另一件事。 div中的一些跨度被div替换。我这样做是因为我计划在这些特定区域内使用块元素并且这样做并且仍然验证它们必须是div，而不是跨度。

以下是我目前的代码：

.header {
    color: #AEC6CF;
    font-family: gabriola;
	font-weight: 900;
	font-size: 50px;
	position: relative;
}


/* ID */

#row1 {
    width: 98%;
    height: 15%;
	position: absolute;
	display: block;
}

#row2 {
    width: 98%;
    height: 2.5%;
	position: absolute;
	display: block;
}

#row3 {
    width: 98%;
    height: 70%;
	position: absolute;
	display: block;
}

#row4 {
    width: 98%;
    height: 2.5%;
	position: absolute;
	display: block;
}

#row5 {
    width: 98%;
    height: 7.25%;
	position: absolute;
	display: block;
}

#column1 {
	border-bottom: 3px solid black;
	border-right: 3px solid black;
	width: 20%;
	height: 100%;
	left: 0;
	position: absolute;
	display: inline-block;
}

#column2 {
	border-bottom: 3px solid black;
	border-left: 3px solid black;
	width: 79.8%;
	height: 100%;
	right: 0;
	position: absolute;
	display: inline-block;
}


/* Misc. */

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.clearfix  {
	float: clear;
	margin: 0;
	padding: 0;
}

<!DOCTYPE html>
	<head>
		<meta charset=utf-8>
		<link type="text/css" rel="stylesheet" href="stylesheet.css">
		<title>Design</title>
	</head>

	<body>
		<div id="row1">
			<div id="column1" class="clearfix">
			</div>
            
            <div id="column2" class="clearfix">
            	<h1 class="header center">Generic Header</h1>
            </div>
		</div>

		<div id="row2">
			<div id="column1" class="clearfix">
			</div>

			<div id="column2" class="clearfix">
			</div>
		</div>

		<div id="row3">
			<span id="column1" class="clearfix">
			</span>

			<span id="column2" class="clearfix">
			</span>
		</div>

		<div id="row4">
			<span id="column1" class="clearfix">
			</span>

			<span id="column2" class="clearfix">
			</span>
		</div>

		<div id="row5">
			<div id="column1" class="clearfix" style="border-bottom: 0px;">
			</div>

			<div id="column2" class="clearfix" style="border-bottom: 0px;">
			</div>
		</div>
	</body>
</html>

Answer 1

有几个问题......为什么所有的div都绝对定位？由于position: absolute;将它们从文档的流中取出，所以没有特定的边距，它们都只是叠加在一起。即使相对于容器，它们也都堆放在容器内。

其次，您的列宽总计超过100％。您需要考虑边框占用的空间。

这是您的代码没有绝对定位的div和调整的列宽。希望这能让你走上正轨。

＆＃13;

.header {
    color: #AEC6CF;
    font-family: gabriola;
	font-weight: 900;
	font-size: 50px;
	position: relative;
}


/* ID */

#row1 {
    width: 98%;
    height: 15%;
	display: block;
}

#row2 {
    width: 98%;
    height: 2.5%;
	display: block;
}

#row3 {
    width: 98%;
    height: 70%;
	display: block;
}

#row4 {
    width: 98%;
    height: 2.5%;
	display: block;
}

#row5 {
    width: 98%;
    height: 7.25%;
	display: block;
}

#column1 {
	border-bottom: 3px solid black;
	border-right: 3px solid black;
	width: 20%;
	height: 100%;
	left: 0;
	display: inline-block;
}

#column2 {
	border-bottom: 3px solid black;
	border-left: 3px solid black;
	width: 73%;
	height: 100%;
	right: 0;
	display: inline-block;
}


/* Misc. */

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.clearfix  {
	float: clear;
	margin: 0;
	padding: 0;
}

＆＃13;

<!DOCTYPE html>
	<head>
		<meta charset=utf-8>
		<link type="text/css" rel="stylesheet" href="stylesheet.css">
		<title>Design</title>
	</head>

	<body>
		<div id="row1">
			<div id="column1" class="clearfix">
			</div>
            
            <div id="column2" class="clearfix">
            	<h1 class="header center">Generic Header</h1>
            </div>
		</div>

		<div id="row2">
			<div id="column1" class="clearfix">
			</div>

			<div id="column2" class="clearfix">
			</div>
		</div>

		<div id="row3">
			<span id="column1" class="clearfix">
			</span>

			<span id="column2" class="clearfix">
			</span>
		</div>

		<div id="row4">
			<span id="column1" class="clearfix">
			</span>

			<span id="column2" class="clearfix">
			</span>
		</div>

		<div id="row5">
			<div id="column1" class="clearfix" style="border-bottom: 0px;">
			</div>

			<div id="column2" class="clearfix" style="border-bottom: 0px;">
			</div>
		</div>
	</body>
</html>

＆＃13;

块元素不垂直对齐

1 个答案: