列表中的图像，最聪明的方法吗？

Question

我意识到要求最聪明的方式＆＃39;有点模糊，但这似乎是我的问题的一部分。使用HTML / CSS（以及许多其他语言，我想象）编码时，有很多方法可以实现1件事。 但我怎么知道什么最适合我的情况？

例如，目前我正在尝试创建两个列表，每个列表在列表项前面都有一个（不同的！）图像。例如，见图片。

我可以采取多种方式，但我想出了三个最合适的方式：

1. 创建一个包含两个无序列表的容器div。在这些UL中，列出了列表项。给每个列表项一个不同的类，这样我就可以通过带有:: before。
的css给它们图像
2. 创建一个包含两个无序列表的容器div。在这些UL中，放一张一行两列的表，一张拿着图像，另一张拿着文字。
3. 创建一个包含两个无序列表的容器div。在这些UL中，放置两个div，一个拿着图像，另一个拿着文本。

在所有情况下，我都会使用CSS进行样式设置和媒体查询以进行缩放。

我应该选择哪一个，为什么？

Answer 1

我认为更奇特的解决方案是创建一个容器div，其中包含两个无序列表，然后为每个li标记添加display: inline-flex，然后您可以轻松处理下一个元素彼此）。

您还可以添加do main container div

display: flex;
flex-flow: row;

然后你的无序列表会彼此相邻。

Answer 2

您可以flex使用相同的内容。

.twoBox {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.firstBox,
.secondBox {
  flex: 1 1 0;
}

.leading {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  line-height: 2;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 0px;
  cursor: pointer;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.name_circle {
  flex: 1 1 0;
  align-self: center;
}

.color_circle {
  width: 30px;
  height: 30px;
  background: #3e9cc0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 15px;
  border-radius: 100%;
}

.color_circle_detail {
  line-height: 1.5;
  flex: 10 0 0;
  /* You can put here value as your need */
}

.color_circle_detail h4 {
  font-size: 13px;
  color: #505050;
  padding: 0;
}

.color_circle_detail p {
  font-size: 13px;
}

<div class="twoBox">
  <div class="firstBox">
    <div class="leading">
      <div class="name_circle">
        <div class="color_circle">
          H
        </div>
      </div>
      <div class="color_circle_detail">
        <h4>Sender</h4>
        <p>Subject</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="secondBox">
    <div class="leading">
      <div class="name_circle">
        <div class="color_circle">
          H
        </div>
      </div>
      <div class="color_circle_detail">
        <h4>Sender</h4>
        <p>Subject</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Answer 3

在我看来，你的第一个想法是最好的。但我会使用<img>标签调整它，而不是使用css来设置图像。这具有SEO友好的优势，主要是如果您为图像添加alt属性。

请参阅此代码段以获取示例：

＆＃13;

＆＃13;

div {
  width: 100%;
  float: left;
}

ul {
  float: left;
  width: 50%;
  list-style-type: none;
  padding: 40px;
  margin: 0;
  box-sizing: border-box;
}

li {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-bottom: 20px;
}

img {
  width: 50px;
  margin-right: 20px;
  border-radius: 50px;
}

p {
  flex: 1;
  margin: 0;
}

＆＃13;

<div>
  <ul>
    <li>
      <img src="http://placehold.it/50x50" />
      <p>
        Lorem ipsum dolor sit amet consecuetur a lit.
      </p>
    </li>
    <li>
      <img src="http://placehold.it/50x50" />
      <p>
        Lorem ipsum dolor sit amet consecuetur a lit.
      </p>
    </li>
    <li>
      <img src="http://placehold.it/50x50" />
      <p>
        Lorem ipsum dolor sit amet consecuetur a lit.
      </p>
    </li>
  </ul>
  <ul>
    <li>
      <img src="http://placehold.it/50x50" />
      <p>
        Lorem ipsum dolor sit amet consecuetur a lit.
      </p>
    </li>
    <li>
      <img src="http://placehold.it/50x50" />
      <p>
        Lorem ipsum dolor sit amet consecuetur a lit.
      </p>
    </li>
    <li>
      <img src="http://placehold.it/50x50" />
      <p>
        Lorem ipsum dolor sit amet consecuetur a lit.
      </p>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;