每个描述旁边都有图片的描述列表，由描述标题描述

Question

有人能解释一下为什么下面的 sn-p 代码没有将服务 1 的图像放在包含 dt 和 dd 的 div 的左侧吗？

我期待 display: flex; flex-direction: row; 使图像与 div 内联。 我还尝试将display: inline; 添加到#service_1:before 和#service_1。但这没有影响。

当我删除了 div 并添加了 <dt id="service_1">（display: inline; 仍然设置）时，文本移动了内联，但内容不再呈现在下面，而且我找不到一种方法来提高内联的顶部图片。

CSS：

#service_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#service_1:before {
  content: url('https://www.minden-luebbecke.de/media/custom/1891_130_1_m.JPG')
}

HTML：

<dl id="service_list">
    <div id="service_1">
        <dt style="">Service 1</dt>
        <dd style="">service one features</dd>
    </div>
    <div id="service_2">
        <dt style="">Service 2</dt>
        <dd style="">includes service one features</dd>
        <dd style="">and a few extra features</dd>
    </div>
</dl>

显示：弹性； - https://jsfiddle.net/37ae6p0v/1/ 显示：弹性+内联； - https://jsfiddle.net/58sjd0zg/1/

Answer 1

因为图像是第一个服务 div 的子元素，所以您需要调整该 div 而不是 <dl>。您还需要包含该 div 的 <dt> 和 <dd>。

在我的示例中，我改为使用类选择器而不是使用 id 来限制特异性。我还认为可能有更多的语义 html 可以用来代替带有 div 的 dl，也许可以考虑使用带有列表项的列表。

<dl class="service-list">
    <div class="service-1">
        <div>
            <dt>Service 1</dt>
            <dd>service one features</dd>
        </div>
    </div>
    <div class="service-2">
        <dt>Service 2</dt>
        <dd>includes service one features</dd>
        <dd>and a few extra features</dd>
    </div>
</dl>

// Uncomment if you want the services to be inline
// .service-list {
//   display: flex;
//   flex-wrap: wrap;
// }

.service-1 {
  display: flex;
  flex-wrap: wrap;
}

.service-1:before {
  content: url('https://www.minden-luebbecke.de/media/custom/1891_130_1_m.JPG');
}

Answer 2

我对你的问题有点困惑，但根据我的解释，我编辑了你的小提琴，你可以看看 here。我替换了您的孩子 div 标签并用子列表 dl 标签替换了它们（我认为这在语义上更正确。另外，我认为这是重要的一点，我将 align-items: flex-end; 添加到您的 #services-list 选择器.

希望对你有所帮助。