如何使用 inline block 或 flex 将嵌套的 div 排列在一起

Question

如何使用 inline block 或 flex 将嵌套的 div 排列在一起

我的 html 中有 3 个元素。

一个图标和两个文本元素。

我希望图标在左侧，然后文本在彼此之上。

我正在尝试使用以下 html 和 css 来执行此操作，这部分工作。该图标向下移动，我尝试将其向上移动。此外，我认为有更好更正确的方法来做到这一点。

body {
  background-color: #D2D5DD;
}

.auto-complete-box {
  display: inline;
  margin-top: -20px;
}

.auto-complete-tag {
  margin-top: 15px;
  margin-left: 5px;
  display: inline-block;
}

.tag-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0083cb;
}

.tag-description {
  font-weight: 100;
  font-size: 12px;
  padding: 1px;
  color: #798071;
  margin-top: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div>
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">HeaderValue</div>
    <div class="tag-description">Item description</div>
  </div>
</div>

<div>
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">Header 2 </div>
    <div class="tag-description">Item description</div>
  </div>
</div>

编辑： div 对齐，并且图标也与右侧的 div 对齐，可能是通过使用拉伸。

Answer 1

使用display:flex 到wrap div 并删除不必要的代码(inline/inline-block)

body {
  background-color: #D2D5DD;
}
.wrap{
display:flex;
}

.tag-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0083cb;
}

.tag-description {
  font-weight: 100;
  font-size: 12px;
  padding: 1px;
  color: #798071;
  margin-top: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrap">
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">HeaderValue</div>
    <div class="tag-description">Item description</div>
  </div>
</div>

<div class="wrap">
  <div class="auto-complete-box">
    <i class="fa fa-bars"></i>
  </div>
  <div class="auto-complete-tag">
    <div class="tag-header">Header 2 </div>
    <div class="tag-description">Item description</div>
  </div>
</div>

Answer 2

在尝试对齐 HTML 中的组件时，另一个更简单的方法是使用表格结构。有时在使用 CSS 时某些组件的对齐不起作用，因为可能存在冲突的样式元素。

所以我更喜欢使用一种方法来确保我的组件完全一致，就是将它们封装在一个表格中。在您的情况下，将图标和文本元素放入一行中的 2 个单独的列中，如下面的代码 sn-p 所示：

我希望这会有所帮助！ :)

body {
  background-color: #D2D5DD;
}

.auto-complete-box {
  display: inline;
  margin-top: -20px;
}

.auto-complete-tag {
  margin-top: 15px;
  margin-left: 5px;
  display: inline-block;
}

.tag-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0083cb;
}

.tag-description {
  font-weight: 100;
  font-size: 12px;
  padding: 1px;
  color: #798071;
  margin-top: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<table>
<tr>
    <td>
        <div>
            <div class="auto-complete-box">
            <i class="fa fa-bars"></i>
        </div></div>
        </td>
        <td>
        <div class="auto-complete-tag">
            <div class="tag-header">HeaderValue</div>
            <div class="tag-description">Item description</div>
        </div>
   </td>
   <tr>
   <td>
       <div>
           <div class="auto-complete-box">
           <i class="fa fa-bars"></i>
       </div></div>
       </td>
       <td>
       <div class="auto-complete-tag">
           <div class="tag-header">Header 2 </div>
           <div class="tag-description">Item description</div>
       </div>
       
   </td>
</tr>
</table>

Answer 3

也许这样：

.wrap{
display: flex;
align-items: center;
}