列表中的圖像，最聰明的方法來做到這一點？

Question

我意識到要求'最聰明的方式'有點模糊，但這似乎是我的問題的一部分。當使用HTML/CSS進行編碼（和其他許多語言，我想象），有很多方法可以實現1件事。 但是，我怎麼知道什麼對我的情況最適合？

例如，我正在嘗試創建兩個列表，每個列表在列表項前都有一個（不同的！）圖像。例如見圖片。

我可以去這個方法很多，但是我來了三個，似乎最適合：

1. 創建一個div容器控股兩家無序列表。在這些UL中，放置列表項。給每個列表項一個不同的類，所以我可以通過css使用::之前給他們的圖像。
2. 創建一個包含兩個無序列表的容器div。在這些UL中，放置一行兩列的桌子，一個拿着圖像，另一個拿着文本。
3. 創建一個包含兩個無序列表的容器div。在這些UL中，放置兩個div，一個持有圖像，另一個持有文本。

在所有情況下，我會使用CSS進行樣式和媒體查詢以進行縮放。

我應該選擇哪一個，爲什麼？

Answer 1

我覺得更看中的解決方案是建立控股兩家無序列表和明年各li標籤添加display: inline-flex在CSS（那麼你可以很容易地處理彼此相鄰的兩個元素）的容器div。

，你也可以加做主容器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屬性到您的圖像。

看到這個片段樣品：

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; 
 
}

<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>