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

Question

有人可以解释为什么下面的代码片段没有将服务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>

display：flex; -https://jsfiddle.net/37ae6p0v/1/显示：flex +内联； -https://jsfiddle.net/58sjd0zg/1/

Answer 1

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

我希望能有所帮助。

Answer 2

由于该图像是第一个服务div的子级，因此您需要调整该div而不是<dl>。另外，您还需要包含该格的<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');
}