使用CSS創建目錄（圖像和文本塊，對齊）

我試圖在我的網頁上創建一類剪輯表。這個想法是，它基本上（在我的腦海裏）是一張左邊一列有縮略圖的表格，然後右邊的一列將包含一個標題，故事出現的位置，日期和描述。使用HTML <table>來做這件事情並不困難，但我很努力地在CSS中變得更好。使用CSS創建目錄（圖像和文本塊，對齊）

我已經梳理了這個（非常有用）的網站，並且遠遠早於我今天上午的位置。但是，我在設置「高度」時遇到問題。我不想確定一個高度。我希望「行」適應圖像或文本塊的高度，並且對於兩列「高度」都是相同的。

現在我有這個。

HTML：

<p class="imageclass">thumbnail</p> 
    <p class="textclass">all sorts of text, separated by line breaks</p>

CSS：

.container { 
width:620px; 
} 

.imageclass { 
    float:left; 
    width:120px; 
} 

.textclass { 
    float:left; 
    width:500px; 
}

來源

2013-11-25 user3034159

對不起，我應該添加一個鏈接。以下是正在進行的頁面：http://speciesrichness.com/portfolio/ – user3034159

使用適當的HTML將縮略圖與文本相關聯將是更好的選擇;如果需要，我會*建議*使用帶有子元素的'ul'（或'ol'）。 –

你試過申請overflow: hidden到.container？

來源

2013-11-25 22:16:18 katranci

如果這真的是一個「行」，爲什麼不把所有的內容包裝在一個div？這個div將成爲其最高孩子的身高。然後，如果你需要操縱行，你可以使用行選擇類的CSS選擇器：

<div class="row"> 
    <p style="height:200px; background: black;" class="imageclass">thumbnail</p> 
    <p class="textclass">all sorts of text, separated by line breaks</p> 
</div>

來源

2013-11-25 22:19:19 devonnigelreed

使用CSS創建目錄（圖像和文本塊，對齊）

回答

相關問題