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