Question

我需要制作带有标题（h1）标题的列的模板，但我无法将其定位为绝对值，因为它必须获得空间向下移动#next内容，宽度为100％。。

在feedle上我设计了我需要的例子，但只有问题，标题的背景不符合H1的高度。如果我将卡从标题中移出并制作＆＃34; margin-top：-123px＆＃34;，卡将位于标题的底部，但我需要将其与标题顶部隔开。

＆＃13;

data Point a = Point a a

＆＃13;

#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;
}

＆＃13;

也适用于小提琴： https://jsfiddle.net/51uvrzff/

谢谢！

Answer 1

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

您可以使用伪元素并将其放在标题下方：

#page {
  width: 700px;
}

#title {
  padding: 5px;
  
}

h1 {
  width: 350px;
  float: left;
  position:relative;
}
h1:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:-100%;
  left:0;
  position:absolute;
  background: #acf;
  border: 1px solid black;
  z-index:-2;
}
#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>

如何使背景适合只指定浮动的孩子

2 个答案: