html - 文本未包含在绝对定位的 div 内

Question

我在将文本包裹在绝对定位的 div 中时遇到问题。我认为问题是我必须将宽度设置为 100%，因为 div 会随页面调整大小。我怎样才能让文本换行。

这是我的代码：

#content {
  background: black;
  min-height: 60px;
  background: #0a0a0a;
  position: relative;
  padding: 0;
  overflow: hidden;
}

#content .entry {
  background: white;
  position: absolute;
  text-wrap: normal;
  top: 0;
  left: 200px;
  padding: 10px;
  width: 100%;
  height: 100%;
  min-height: 50px;
  border-left: 1px solid #262626;
}

<div id="content">
  <div class="entry">
    <-----text---->
  </div>
</div>

Answer 1

问题是您在 .entry 元素上声明了 100% 的宽度和 400px 的左侧。总宽度将为 100% + 400px，这将使 .entry 元素比其容器更宽。它确实包装了它的文本，但你不会看到它最右边的 400 像素。

问题是您不能在同一个元素上定义宽度和填充/边距/左/右/等。您需要一个嵌套结构来完成它。因此，在 content > entry html 结构中添加一个额外的 div，并在第一个上定义宽度，在第二个上定义填充。