Список описания с изображением рядом с каждым описанием, обозначенный заголовками описания

Question

Может кто-нибудь объяснить, почему следующий фрагмент кода не помещает изображение для сервиса 1 в левую часть div, содержащего dt и dd?

Я ожидал, что 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>. Также вам нужно содержать <dt> & <dd> этого div.

В моем примере я переключился на селекторы классов вместо использования id для ограничения специфичности. Я также думаю, что есть, вероятно, больше semanti c html, чтобы использовать вместо dl с divs, возможно, вместо этого рассмотрите использование списка с элементами списка.

<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

Я немного озадачен вашим вопросом, но по моей интерпретации я отредактировал вашу скрипку, вы можете посмотреть здесь . Я заменил ваши дочерние теги div и заменил их тегами подсписка dl (я думаю, что это более семантически правильно. Кроме того, и я думаю, что это важный бит, я добавил align-items: flex-end; в ваш селектор #services-list .

Надеюсь, это немного поможет.