如何在不使用空標題的情況下對齊此示例中兩個段落的頂部？ （例如， <h2></h2> ）

Question

給定網頁上的兩個並排框 - 一個包含標題和一個段落，另一個只包含一個段落 - 如何使用純HTML / CSS對齊段落的頂部？ 即，不使用空標題（例如， <h2>&nbsp;</h2> ）或JavaScript？

這是一個說明難題的小說： http ： //jsfiddle.net/y5gpe/

估計margin-top段落的適當margin-top （如上面的jsfiddle所示）似乎是一種徒勞的練習，因為不同的瀏覽器的字體大小總是略有變化。 沒有辦法讓它們完美對齊。 一個很好的例子：上面的jsfiddle在Chrome中完全對齊，但在Firefox中它被3px關閉：

唯一的方法是在無頭盒的標記中創建一個丑陋的空頭？ 這是我經常在HTML / CSS中遇到的問題，我想知道其他開發人員是否有更優雅的方式來處理它。

Answer 1

建議將使用多行而不是簡單的兩列。 因此，不是兩列使用兩行，只有第一列或標題的全寬列。 然后使用兩列行作為實際文本內容。 演示 。 這當然可能會增加它本身的含義。

插圖

----------------------
| Header             |
----------------------
| Col-1    | Col-2   |
----------------------

Answer 2

假設您無法更改HTML代碼，或者確實標題只與左列相關而不是右側，您可以在.no-header上使用:before偽元素並創建“空格”與隔壁列中的<h2>具有相同的樣式。

讓我們說h2有明確設置的以下樣式：

h2 {
  font-size: 1.6em;
  margin: 20px 0;
}

然后我們可以模仿.no-header元素中的偽元素：

p.no-header:before {
  content: '\a0'; /* A SPACE */
  display: block; /* block level, like a <h2> element */
  font-size: 1.6em;
  font-weight: bold; /* Not sure if this makes a difference, but just in case */
  margin: 20px 0;
}

DEMO

Answer 3

您可以嘗試將Header粘貼到box類之外，並將所有內容包裝在容器中：

HTML:
<div class="container">
    <h2>Header text</h2>
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare nunc sed lectus commodo faucibus a a purus. Curabitur sit amet placerat diam.</p>
    </div>
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare nunc sed lectus commodo faucibus a a purus. Curabitur sit amet placerat diam.</p>
    </div>
</div>

CSS:
.box {
    float: left;
    border: 0; 
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.container{
    border: 1px solid #888;
    overflow: hidden;
}