将多行文本与标签对齐，使用相同的缩进

Question

我有一个相当简单的问题，我无法在任何地方找到合适的解决方案。

我有一个标签，旁边有文字，将换行到下一行。我希望包装的文本缩进所有相同的内容。但我希望第一行文字与标签对齐。 inline-block和float都会导致文本出现在下一行。

**标签和文字行宽度未知

我想要的是什么：

＆＃13;

＆＃13;

.item div {
 display: inline-block;
}

.label {
  float: left;
}

.text {
 float: left;
}

＆＃13;

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在这种情况下使用定位。这是一个固定流体的案例：

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或者

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

固定流体模型。在我的片段中，我演示了两种示例。在第一种情况下，流体的尺寸较小。接下来的内容太长了。

<强>段

＆＃13;

＆＃13;

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

＆＃13;

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

工作代码段

＆＃13;

＆＃13;

.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;}
.parent .fixed {position: absolute; left: 5px; width: 90px;}
.parent .fluid {}

＆＃13;

<div class="parent">
  <div class="fixed"><strong>Label</strong></div>
  <div class="fluid">The Text</div>
</div>
<div class="parent">
  <div class="fixed"><strong>Label</strong></div>
  <div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用display: table;和display: table-cell;

.item {
 display: table;
}

.label {
  display: table-cell;
}

.text {
  display: table-cell;
}

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>

Answer 3

你应该能够使用内联块来实现这一点。看看这个

＆＃13;

＆＃13;

div.item {
    width: 500px;
}

.label {
    float: left;
    display: inline-block;
    width:50px;
}

.text {
   float: left;
   display: inline-block;
   width: 450px;
}

＆＃13;

<div class="item">
    <div class="label">
        <strong>Label:</strong>
    </div>
    <div class="text">
        Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. 
        The first line should remain inline with the label untill it wraps.
        Both the label and the text are unknown lengths. 
        I can't seem to accomplish this with either floats or inline-block.
    </div>
    <div style="clear:both;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

.item div {
 display: inline-block;
}

.label {
  float: left;
  width:15%;
}

.text {
 float: right;
 width:85%;
}

＆＃13;

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>

＆＃13;

＆＃13;

＆＃13;