Question

请参阅 Fiddle...

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

.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

这是一个完美的例子，说明好的'<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中执行此操作，请查看this fiddle

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

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

3 个答案: