如何使用内联块或flex

Question

如何使用内联块或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个单独的列中，如下面的代码片段所示：

我希望这会有所帮助！ ：）

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