css-tables - 我可以在事先不知道图像宽度的情况下使用 CSS 表格将图像和文本并排放置吗？

Question

我想要一个垂直堆叠的块；每个块的左侧都有一个图像，右侧有文本（标题和段落）。

我希望图像是它的自然宽度，并且文本使用父元素中的剩余宽度。

这类似于表格，但不同块中的图像具有不同的宽度。所以表中的第一个“列”的宽度不是恒定的。

将图像向左浮动不起作用，因为如果文本的高度大于图像，则文本会在图像下方换行。

CSS 表格似乎不起作用，因为 CSS 不知道块与块之间的不同图像宽度。

我的“块”元素 CSS 包括“显示：表行；”。我的图像元素和文本元素 CSS 包括“显示：表格单元；”。结果是一些图像是它们的自然尺寸；其他的比它们的自然尺寸小。

这似乎与文本的数量有关：一行文本得到一个自然大小的图像；两条线将图像压缩了几个像素；15 行将图像压缩到大约一半大小。

我欢迎就如何实现我的目标提出建议。

标签： css-tables

Answer 1

我认为这可以通过 display flex 来解决。W3C 文档：https ://www.w3schools.com/css/css3_flexbox.asp

尝试这个：

HTML

<div class="row" style="width: 100%">
      <img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
      <div>
        <h2>Head</h2>
        <p>
        Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
        </p>
      </div>
    </div>
    <div class="row" style="width: 70%">
      <img src="https://image.shutterstock.com/image-photo/salesman-holding-cutting-board-assorted-260nw-407934532.jpg"/>
      <div>
        <h2>Head</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus massa nec fermentum egestas. Sed feugiat, nisl vitae dictum accumsan, felis odio elementum eros, imperdiet faucibus mi nisi convallis dolor. Mauris interdum maximus neque, in convallis erat facilisis porttitor. Sed ac tortor imperdiet, efficitur nisi nec, efficitur massa. Integer consectetur nec nunc ac porta. Proin non ultricies lorem, rhoncus laoreet ligula. Donec condimentum mauris id urna placerat dapibus. Cras consequat, quam vitae semper luctus, mi tortor finibus augue, sed vestibulum odio lorem at tellus. Fusce eu urna eget ante mollis vestibulum. Nullam ante eros, convallis vitae hendrerit at, volutpat id dui.
        </p>
      </div>
    </div>
    <div class="row" style="width: 80%">
      <img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
      <div>
        <h2>Head</h2>
        <p>
        Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
        </p>
      </div>
    </div>

CSS：

.row {
  display: flex;
}
.row img {
  flex-grow: 1;
  height: max-content;
}
.row div {
  margin-left: 10px;
}

https://jsfiddle.net/ymuxdtg6/