如何将图标左对齐，文本右对齐

Question

有谁知道如何使用 CSS 和 HTML 制作这样的东西？

我自己尝试了一下，但看起来像这样：

这是我到目前为止所拥有的：

a {
  text-decoration: none;
}

.bar {
  background: #0f0f0f;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 25px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.icon {
  font-size: x-large;
  text-align: center;
  width: 25%;
}

.text {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="https://example.com" target="_blank">
    <div class="bar">
      <div class="icon"><i class="fas fa-folder"></i></div>
      <div class="text"><b>Title</b><br>Description.</div>
    </div>
  </a>
</div>

Answer 1

由于您已经使用了 CSS-Grid，因此我将使用它。你只需要改变一行：

.bar { grid-template-columns: repeat(2, 1fr); }

到

.bar { grid-template-columns: repeat(2, min-content); }

min-content将仅占用所需的空间。1fr，将占用框宽度的 1 分数（在本例中为 50%）。

a {
  text-decoration: none;
}

.bar {
  background: #0f0f0f;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 25px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, min-content);
}

.icon {
  font-size: x-large;
  text-align: center;
  width: 25%;
}

.text {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="https://example.com" target="_blank">
    <div class="bar">
      <div class="icon"><i class="fas fa-folder"></i></div>
      <div class="text"><b>Title</b><br>Description.</div>
    </div>
  </a>
</div>