使用 CSS 创建目录（图像和文本块，对齐）

Posted 2023-03-06

【中文标题】使用 CSS 创建目录（图像和文本块，对齐）

【英文标题】：Use CSS to create table of contents (image and block of text, aligned)

【发布时间】：2013-12-10 20:25:28

【问题描述】：

我正在尝试在我的网页上创建一个剪辑表。这个想法是（在我看来）它基本上是一个表格，左栏中有一个缩略图，然后右栏中将包含一个标题、故事出现的位置、日期和描述。使用 html <table> 可以轻松完成此操作，但我正在努力提高 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;

【问题讨论】：

对不起，我应该添加一个链接。这是正在进行的页面：speciesrichness.com/portfolio

使用适当的 HTML 将缩略图与文本相关联会是更好的选择；如果需要，我会建议使用带有子元素的ul（或ol）。

【参考方案1】：

您是否尝试过将overflow: hidden 应用于.container？

【参考方案2】：

如果这真的是一个“行”，为什么不将所有内容包装在一个 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>