垂直对齐

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

如果你确实想做到这一点在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; 
} 

Answer 2

这是一个很好的例子，当好的醇'<table>元素仍然有用！另外，请注意，如果整体宽度不够大，则您的段落将完全包裹在所有标题下。

Answer 3

正确的方式做，这是使用一个定义列表

参见：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>