0
我目前正在尝试开发一个网站。目前我正试图让设计失败，但它给了我相当艰难的时间。块元素不垂直对齐
我有5个div。每个包含两个span，column1和column2。 div是块，跨度是内联块。但是，由于某些原因，div不想垂直对齐。任何帮助表示赞赏。另外，还有一件事。 div中的一些span被div替换了。我这样做是因为我计划在这些特定区域内使用块元素，并且这样做并且仍然验证它们必须是div的，而不是跨度的。
下面是我当前的代码：
.header {
color: #AEC6CF;
font-family: gabriola;
\t font-weight: 900;
\t font-size: 50px;
\t position: relative;
}
/* ID */
#row1 {
width: 98%;
height: 15%;
\t position: absolute;
\t display: block;
}
#row2 {
width: 98%;
height: 2.5%;
\t position: absolute;
\t display: block;
}
#row3 {
width: 98%;
height: 70%;
\t position: absolute;
\t display: block;
}
#row4 {
width: 98%;
height: 2.5%;
\t position: absolute;
\t display: block;
}
#row5 {
width: 98%;
height: 7.25%;
\t position: absolute;
\t display: block;
}
#column1 {
\t border-bottom: 3px solid black;
\t border-right: 3px solid black;
\t width: 20%;
\t height: 100%;
\t left: 0;
\t position: absolute;
\t display: inline-block;
}
#column2 {
\t border-bottom: 3px solid black;
\t border-left: 3px solid black;
\t width: 79.8%;
\t height: 100%;
\t right: 0;
\t position: absolute;
\t display: inline-block;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
\t float: clear;
\t margin: 0;
\t padding: 0;
}<!DOCTYPE html>
\t <head>
\t \t <meta charset=utf-8>
\t \t <link type="text/css" rel="stylesheet" href="stylesheet.css">
\t \t <title>Design</title>
\t </head>
\t <body>
\t \t <div id="row1">
\t \t \t <div id="column1" class="clearfix">
\t \t \t </div>
<div id="column2" class="clearfix">
\t <h1 class="header center">Generic Header</h1>
</div>
\t \t </div>
\t \t <div id="row2">
\t \t \t <div id="column1" class="clearfix">
\t \t \t </div>
\t \t \t <div id="column2" class="clearfix">
\t \t \t </div>
\t \t </div>
\t \t <div id="row3">
\t \t \t <span id="column1" class="clearfix">
\t \t \t </span>
\t \t \t <span id="column2" class="clearfix">
\t \t \t </span>
\t \t </div>
\t \t <div id="row4">
\t \t \t <span id="column1" class="clearfix">
\t \t \t </span>
\t \t \t <span id="column2" class="clearfix">
\t \t \t </span>
\t \t </div>
\t \t <div id="row5">
\t \t \t <div id="column1" class="clearfix" style="border-bottom: 0px;">
\t \t \t </div>
\t \t \t <div id="column2" class="clearfix" style="border-bottom: 0px;">
\t \t \t </div>
\t \t </div>
\t </body>
</html>
你的HTML和CSS感到非常困惑。首先，'span'不适用于layout结构，只能使用'div'和类似。我不明白你为什么在div中放置'display：block;'，因为它们默认已经有了这个值。而且有些元素没有理由具有“绝对地位”。一切都很混乱，我不明白你在做什么。一些图像会很有帮助。 – 2015-04-05 03:46:19
是的，我现在明白我错误地使用了一些东西。但是，我使用了以下海报中的代码并对其进行了修复。现在，他们不会保留它们的高度和宽度。如果您想要我可以提供的图片。 – MainStream 2015-04-05 04:26:30