css - 段落与段落标题的垂直对齐

Question

请看这个小提琴...

我有两列。左列包含段落标题。右栏包含实际段落。我正在尝试将段落标题与每个段落的顶行对齐，并且在不使用不必要和草率的换行符的情况下，我很难做到这一点。

.col1 {float: left; width: 300px; border: 1px solid black; padding: 10px;}
.col2 {float: left; width: 300px; border: 1px solid black; padding: 10px;}


.line1 { height: auto; margin: 10px 0 20px 0; }
.line2 { height: auto; margin: 10px 0 20px 0; }
.line3 { height: auto; margin: 10px 0 20px 0; }

想法？

Answer 1

这是一个完美的例子，说明好的 ol'<table>元素何时仍然有用！另外，请注意，如果整体宽度不够大，您的段落会完全包裹在所有标题下。

Answer 2

正确的方法是使用定义列表

请参阅：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>

Answer 3

如果您确实想在div元素中执行此操作而不是dt，请查看此小提琴

HTML

<div class='wrapper'>
    <div class="col1">
    Paragraph 1
    </div> 
    <div class="col2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
    </div>
    <div style='clear:both;'></div>
    <div class="col1">
    Paragraph 2
    </div> 
    <div class="col2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
    </div>
    <div style='clear:both;'></div>
    <div class="col1">
    Paragraph 3
    </div> 
    <div class="col2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
    </div>
    <div style='clear:both;'></div>    
 </div>

CSS

body{
      width:100%;
}
.wrapper{
    border: 1px solid black;
}
.col1, .col2 {
    float: left; width: 300px;  padding: 10px;
}

.col2{
    border-left:1px solid black;
}