不垂直对齐的块元素

Question

我目前正在尝试开发一个网站。目前我正在尝试将设计降下来，但这让我很艰难。

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

下面是我当前的代码：

.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%。您需要考虑边框占用的 space。

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

.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;
}

<!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>

不垂直对齐的块元素

Block Elements Not Vertically Aligning

html

element

block