html - 给定文本内容长度，防止 float div 转到下一行

Question

我遇到了一些 CSS 定位问题。在阅读了其他一些问题后，我一直无法找到我的确切问题或任何我可以确定的可以指示我如何解决我的问题的信息。

我有未定义数量的数据行需要遵循相同的结构。结构如下:

• 左侧的彩色图标
• 右侧文本未定义长度

到目前为止，对于单行文本，我得到了以下令我满意的结果:

然而，当我让文本超出一行时，我最终得到以下结果:

我需要使我的文本始终与我的图标垂直对齐，以便文本的中间与图标的中间对齐。我拥有的唯一固定值是图标的宽度。不幸的是，我无法固定文本 div 的宽度，因为它需要随着窗口的扩展而扩展。

我有以下结构来创建呈现的图像:

<div class="row">
    <div class="iconDiv">
        <div class="circle"></div>
    </div>
    <div class="informationDiv">
        <span class="information"></span>
    </div>
</div>

.row {
    clear: left;
}

.iconDiv {
    float: left;
    margin-left: 10px;
}

.informationDiv {
    display: inline-block;
    float: left;
    padding-top: 3px; /*How I am currently aligning my text vertically to center of icon*/
}

我曾尝试使用 box-sizing 以防万一这会将 div 推到下一行，但它似乎没有帮助。我也试过设置 div 的高度，但还是没有成功。事实上，CSS 不是我的强项，我可能会错过问题背后的真正原因。如果有任何人会特别推荐任何资源来协助这方面的定位，那就太好了。此外，如果不推荐我容器化(肯定是一个词)的方式，我非常愿意改变它。

如果不使用固定值这太难了，那么我可以选择让图标保持在行的顶部，文本随着它的增长继续下降，文本的顶部靠近对齐不是图标的顶部。然而，这绝对不是首选。

提前谢谢大家!

Answer 1

您可以将其简化为一个 flex 父项和两个子项。使用 flexbox 进行垂直对齐非常简单。

演示

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

.row {
  margin-bottom: 1.2em;
}

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;  
  margin-right: 15px;
  flex-shrink: 0;
}

.circle.high-pri {
  background-color: #ea9999;
}

.circle.medium-pri {
  background-color: #f9cb9c;
}

.circle.low-pri {
  background-color: #b6dca8;
}

<div class="row">
  <div class="circle high-pri"></div>
  <span class="information">High priority - No issues   here</span>
</div>

<div class="row">
  <div class="circle medium-pri"></div>
  <span class="information">High priority - No issues here but slightly longer text</span>
</div>

<div class="row">
  <div class="circle low-pri"></div>
  <span class="information">High priority - No issues but much longer text than first expected, which is definitely okay, see?</span>
</div>