html - 如何使背景只适合指定的 float child

Question

我需要制作模板，其中的列从标题 (h1) 向下的标题开始，但我不能将其定位为绝对的，因为它必须有空间向下移动 #next 内容，宽度为 100% 。 . .

在 Feedle 上，我设计了我需要的示例，但唯一的问题是，该标题的背景高度不适合 H1。如果我将卡片从标题中移出并制作“margin-top: -123px”，卡片将位于页眉底部，但我需要将其放置在与页眉顶部间隔开的位置。

#page {
  width: 700px;
}

#title {
  background: #acf;
  border: 1px solid black;
  padding: 5px;
}

h1 {
  width: 350px;
  float: left;
}

#card {
  width: 200px;
  background: #fafafa;
  float: right;
  margin-top: 50px;
  padding: 5px;
}

#content {
  width: 450px;
  float: left;
  background: #cad;
  padding: 5px;
}

#next {
  background: #aeb;
  width: 100%;
  height: 30px;
  margin-top: 10px;
}

.clear {
  clear: both;
}

<div id="page">
  <div id="header">
    <div id="title">
      <h1>TITLE very very very very long TILTE</h1>
      <div id="card">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla
        in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum
        molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla.

      </div>
    </div>
    <div id="content">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla
      in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum
      molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla.</div>
    <div class="clear"></div>
    <div id="next">any text</div>
  </div>
</div>

也可在 fiddle 上使用: https://jsfiddle.net/51uvrzff/

谢谢!

Answer 1

检查下面的例子，如果这是你想要的:

#page {
  width: 700px;
  margin: 0 auto;
}

#title h1 {background: #acf; border:1px solid black; padding:5px;}

#card {
  width: 200px;
  background: #fafafa;
  float: right;
  padding: 5px;
}

#content {
  width: 450px;
  float: left;
  background: #cad;
  padding: 5px;
}

#next {
  background: #aeb;
  width: 100%;
  height: 30px;
  margin-top: 10px;
}

.clear {
  clear: both;
}

<div id="page">
  <div id="header">
    <div id="title">
      <h1>TITLE very very very very long TILTE</h1>
      <div id="card">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla
        in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum
        molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla.

      </div>
    </div>
    <div id="content">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla
      in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum
      molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla.</div>
    <div class="clear"></div>
    <div id="next">any text</div>
  </div>
</div>

https://jsfiddle.net/51uvrzff/1/