垂直對齊

我有兩列。左欄有段落標題。右欄包含實際的段落。我試圖將段落標題與每個段落的最上面一行對齊，並且我最難做到這一點，而沒有使用不必要和不合理的換行符。

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

想法？

來源

2013-11-14 webfrogs

如果你確實想做到這一點在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; 
}

來源

2013-11-14 15:16:40 SW4

這是一個很好的例子，當好的醇'<table>元素仍然有用！另外，請注意，如果整體寬度不夠大，則您的段落將完全包裹在所有標題下。

來源

2013-11-14 15:14:59

我不同意。表格用於表格數據，而不是佈局。 –

正確的方式做，這是使用一個定義列表

參見：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>

來源

2013-11-14 15:15:21

回答

相關問題