Question

我有一个跨度。在里面我有两个div。一个用作填充，一个用作内容。如果内容是多行的，它会包裹我的padding div，我想阻止它。

这个jsfiddle展示了我现在拥有的东西。 https://jsfiddle.net/ju637z98/

<span>
  <span style="width: 20px; display: inline-block;">

  </span>
  <span style="display: inline; " >
    This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.
  </span>
</span>

如果我将内容div更改为

display: inline-block

这两个div最终堆叠在一起。

我正在尝试避免使用内容div的样式，因为padding div并不总是存在，所以我想避免使用两种不同的样式来实现我的需要。

任何帮助都将不胜感激。

编辑：更新上面的剪辑和jsfiddle以使用跨度而不是div。

Answer 1

您可以在第一个div上创建父flex并使用flex-basis来控制该列宽。

＆＃13;

span {
  display: flex;
}
.padding {
  flex: 0 0 20px;
}

＆＃13;

<span>
  <div class="padding">
  </div>
  <div>
    This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.
  </div>
</span>

＆＃13;

您还可以float填充div并使用非浮动上的overflow: auto来包含文本。

＆＃13;

.padding {
  float: left;
  width: 20px;
  height: 1em;
}
span div:nth-child(2) {
  overflow: auto;
}

＆＃13;

<span>
  <div class="padding">
  </div>
  <div>
    This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.
  </div>
</span>

＆＃13;

Answer 2

我会删除第一个DIV并在内容DIV上使用margin-left: 20px;（或任何值）（并将其设为inline-block）

<span>
  <div style="display: inline-block; margin-left: 20px;" >
    This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.
  </div>
</span>

Answer 3

.wrapper{
  padding-left:20px;
  border:thin black solid;
  text-align:justify;
}

<div class="wrapper">
 This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.This is a lot of text. This is a lot of text. This is a lot of text.
</div>

这和你想要的一样吗？希望这会有所帮助。

添加div以创建填充

3 个答案: