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>

Answer 2

我不太确定您是如何生成圆的，是图标还是图像？使用图标时。您可以创建类似这样的内容：

<p><img class="circle">Undefined text</p>

我认为这不会打破常规。并始终将其放在前面。

也。您可能不应该在文本的中间使用padding-top来使其对齐。使用行高。

例如：

当您的圈子高30像素时。使用line-height: 30px;可以始终将其居中放置在圆圈的旁边，并且比填充效果更好。

Answer 3

您不远处。

鉴于您当前的CSS，实现此目标的最佳方法是不要浮动.informationDiv。将其设置为display: block，然后给它一个margin-left。然后，浮动元素将位于边距内。

喜欢这个...

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}
.row {
    clear: left;
}

.iconDiv {
    float: left;
    margin-left: 10px;
}

.informationDiv {
    display: block;
  margin-left: 40px;
}

<div class="row">
    <div class="iconDiv">
        <div class="circle"></div>
    </div>
    <div class="informationDiv">
        <span class="information">A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. </span>
    </div>
</div>

Answer 4

我已经使用css flexbox为您的问题提供了解决方案。

正在运行的演示：https://codepen.io/shubhamYerawar/pen/xBZWLX。

.container {
  display: flex;
  flex-direction: column;
}
.container__row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 10px;
}
.red {
  background: red
}
.green {
  background: green;
}

<div class="container">
  <div class="container__row">
    <div class="icon red">
      <!--   here your icon or image will go       -->
    </div>
    <div class="text">Text</div>
  </div>
  <div class="container__row">
    <div class="icon_container">
      <div class="icon green">
        <!--   here your icon or image will go       -->
      </div>
    </div>
    <div class="text">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
      remaining essentially unchanged.
    </div>
  </div>
  <div class="container__row">
    <div class="icon red">
      <!--   here your icon or image will go       -->
    </div>
    <div class="text">Text</div>
  </div>
</div>

希望这对您有所帮助。

给定文本内容长度，防止浮动div转到下一行

4 个答案: