时间戳

首页 > 解决方案 > 3 列砂砾，中间有文本，向左列增长

html - 3 列砂砾，中间有文本，向左列增长

问题描述

任何人都可以帮助我让标题在左侧区域增长吗？但不应更换列。只有标题文本应该与左栏重叠

#grid {
  display: grid;
  width: 100%;
  width-max: 1200px;
  height:436px;
  grid-template-columns: 25% 20% auto;
}

#areaA {
  background-image: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg");
  align-self: center;
  height:436px;
}

#areaB {
  background-color: red;
  color: #fff;
  font-size: 40px;
}

#areaC {
  background-color: yellow;
  padding-top: 48px;
  padding-bottom: 48px;
}
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">This is a Title which should grow over areaA, but it doesn't</div>
  <div id="areaC">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

链接到 CodePen

标签： htmlcsssassless

解决方案

如果我理解正确，您希望您的标题跨越前两列，对吗？您定义了三列。之后，您可以像这样使用网格区域定位子元素：

#grid {
  display: grid;
  grid-template-columns: 25% 20% auto;
  width: 100%;
  height: 436px;
  max-width: 1200px; /* <- typo corrected here */
  margin: 0 auto;
  background: #ddd;
}


/* position and style title and areas */

.area {
  padding: 24px;
  color: #fff;
}

#areaA {
  background: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg");
  grid-area: 1 / 1 / 2 / 2;
}

#areaB {
  background: red;
  grid-area: 1 / 2 / 2 / 3;
}

#areaC {
  background: yellow;
  color: black;
  grid-area: 1 / 3 / 2 / 4;
}

#title {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding: 24px;
  grid-area: 1 / 1 / 2 / 3;
  align-self: center;
}
<div id="grid">
  <div class="area" id="areaA">Area A</div>
  <div class="area" id="areaB">Area B</div>
  <div class="area" id="areaC">Area C<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <h2 id="title">This is a Title which should grow over areaA, but it doesn't</h2>
</div>

推荐阅读