每个描述旁边带有图像的描述列表，由描述标题描述

Question

有人可以解释为什么以下代码片段没有将服务 1 的图像放置到包含 dt 和 dd 的 div 的 left-side 中吗？

我原以为 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

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

希望对您有所帮助。

Answer 2

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

的 <dt> & <dd>

在我的示例中，我更改为 class 选择器，而不是使用 id 来限制特异性。我还认为可能有更多语义 html 可以使用而不是带有 divs 的 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');
}

每个描述旁边带有图像的描述列表，由描述标题描述

Description list with image beside each description, delineated by description titles

html

css

html-lists

flexbox