在不更改html代码的情况下，使块适应内容。只是因为风格

Question

蓝色块可以使用不同的高度，也可能文档中没有。蓝色块下面是新闻块...

无需更改html文档。是否可以使用样式使蓝色块成为其内容的高度，并将新闻压在蓝色块上或处于红色块的水平，以防蓝色块不在 html 中

div {
  font-size: 20px;
  font-weight: bold;
}

.gl {
  display: grid;
  grid-template-columns: 500px 200px;
  gap: 20px;
}

.b_1 {
  aspect-ratio: 1;
  background: red;
}

.b_2 {
  background: blue;
}

.Content {
  background: #0caa27;
  padding: 10px;
}

<div class='gl'>
  <div class='b_1'>Blok_1</div>
  <div class='b_2'>Blok_2</div>
  <div class='Content'>Content</div>
  <div class='News'>News</div>
</div>

---

Answer 1

不，这是不可能的。为了实现这一点，您的 HTML 需要一个元素来表示 sidebar 或

.b_2

和

.news

的组合。

<div class='b_1'>Blok_1</div>
<div class='content'>Content</div>
<div class='sidebar'>
  <div class='b_2'>Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2</div>
  <div class='news'>News</div>
</div>

body {
  font-size: 20px;
  font-weight: bold;
  margin: 1em;
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: 1em;
}

.b_1, .b_2, .content, .news {
  padding: 0.5em;
}

.b_1 {
  aspect-ratio: 1;
  background: red;
}

.b_2 {
  background: blue;
}

.sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.content {
  background: #0caa27;
}

<div class='b_1'>Blok_1</div>
<div class='content'>Content</div>
<div class='sidebar'>
  <div class='b_2'>Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2 Blok_2</div>
  <div class='news'>News</div>
</div>