想用HTML和CSS來模擬這種類型的表格

Question

想爲我自己的個人博客網站使用類似於這種格式的東西。源代碼並沒有給我提示我如何編寫這樣的格式。

我想在某個表格的每一行中使用div來做到這一點，但我知道有一個更乾淨的方式來做到這一點。任何建議？

Answer 1

你要求的東西看起來很簡單。你給出的例子在字體，重量和顏色方面有相當不錯的設計選擇;但實際的標記不需要非常複雜。

它基本上是一堆2列的行，每行的第一列包含標題和日期，第二列包含摘要。下面的jsfiddle做的是：https://jsfiddle.net/cxmgLctq/

的HTML：

<div class="container"> 
    <div class="row"> 
    <div class="left"> 
     <h1> 
     test 
     </h1> 
    </div> 
    <div class="right"> 
     <h2> 
     more information here. 
     </h2> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="left"> 
     <h1> 
     test 
     </h1> 
    </div> 
    <div class="right"> 
     <h2> 
     more information here. 
     </h2> 
    </div> 
    </div> 
</div> 

而CSS：

.row { 
    border-bottom: 1px solid black; 
    border-top: 1px solid black; 
    width: 100%; 
    height: 100px; 

} 

.left { 
    float: left; 
    width: 200px; 
} 

.right { 
    float: left; 
    width: 400px; 
} 

.container { 
    width: 600px; 
    height: 600px; 
    margin: 20px 
    display: block; 
} 

注意，我做了沒有真正嘗試的風格以任何方式。這種造型讓你發佈的例子看起來不錯，而且我看起來很糟糕。此外，您可以使用大量的庫來實現這一目標，或者像您建議的那樣使用表格，但它完全可以用div來實現。你應該做什麼取決於你的情況。