Question

我需要一个提供以下结果的示例html / css

23:59 icon Some text which can wrap
           like this
      icon Some text which can wrap
           like this

所以有2行。第一行以时间开头。第二行缩进相同的宽度，以便图标对齐。图标要比文本大一些，只是使事情变得棘手。每个图标的右侧是一些文本，这些文本可以自动对齐。

真的很感谢一些有关如何执行此操作的想法。

我也在寻找一个建议，如何将2个图标用垂直线连接起来，这样，如果这些图标是圆形的，则整个东西将显示为垂直杠铃。但这可能太麻烦了

Answer 1

将事物保留在受人尊敬的div中，然后将它们漂浮在所需的位置。

.wrapper {
    float: left;
}

div {
    padding-right: 5px;
}

span {
  float: right;
  padding-left: 15px;
  width: 180px;
}

<div class="wrapper">
    <div>
        23:59
    </div>
</div>
<div class="wrapper">
    <div>
        icon
        <span>Some text which can wrap like this</span>
    </div>
    <div class="wrapper">
        icon
        <span>Some text which can wrap like this</span>
    </div>
</div>

Answer 2

您可以使用表格轻松实现该布局。

要通过垂直线连接两个图标，我将使用伪选择器。

/* Selects pseudo element :before on every second icon */
.icon:nth-child(even)::before {
 content: '';
 display: block;
 width: 1px;
 height: 20px;
 background: #000;
 position: relative;
 top: -20px;
}

需要一些调整，但是您已经有了主意。

Answer 3

如果我理解正确，我认为一切都应该与Flex-Box一起使用。也许您看着css-ticks得到了一些启发。

这应该有效：

.flex-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

i {
  font-size: 2rem
}

div {
  padding: 6px
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>

<div class="flex-row">
  <div>12:30</div>
  <div>
    <i class="fas fa-check"></i>
  </div>
  <div>Lorem ipsum dolor set amet..</div>
</div>

<div class="flex-row">
  <div>12:30</div>
  <div>
    <i class="fas fa-times"></i>
  </div>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam..</div>
</div>

如何使用图标和缩进来布局html文本

3 个答案: