Css 段落与段落标题的垂直对齐

请查看此

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

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

---

想法

这是一个很好的例子，说明好的ol'

元素仍然有用！另外，请注意，如果整体宽度不够大，则段落会完全包裹在所有标题下。

这是一个很好的例子，说明好的ol'

元素仍然有用！另外，请注意，如果总宽度不够大，则段落会完全包裹在所有标题下。

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

见：

火狐
Mozilla Firefox
外汇
免费、开源、跨平台、图形化web浏览器
由Mozilla公司和数百名志愿者开发。
正确的方法是使用定义列表

见：


火狐
Mozilla Firefox
外汇
免费、开源、跨平台、图形化web浏览器
由Mozilla公司和数百名志愿者开发。
如果您确实想在
div
元素而不是
dt
中执行此操作，请查看

HTML

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

HTML

我不同意。表格是表格数据，不是布局。我不同意。表格用于表格数据，而不是布局。
<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>

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

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

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