这种布局只能使用 CSS 吗？ [关闭]答案

【问题标题】：Is this layout possible with CSS only? [closed]这种布局只能使用 CSS 吗？ [关闭]
【发布时间】：2022-08-24 21:06:55
【问题描述】：

谁能想到只用 CSS 做到这一点的方法？我能想到的唯一方法是使用 subgrid，但浏览器支持还不够好。

如果可能的话，我希望将大文本全部包裹在 <h1> 标签中，这很困难。

我想我必须使用 javascript 来计算标题最后一个单词的宽度并用它来偏移段落。

主标题可以是 2 或 3 行，段落也可以是 3 行。

我当前的 HTML 在下面，但可以轻松更改它。

谢谢

<div class=\"home-hero-banner-slide-title\">
  <h1>
    <span>Line 1</span>
    <span>Line 2</span>
    <span>Line 3</span>
  </h1>
  <p class=\"home-hero-banner-slide-paragraph\">paragraph here</p>
</div>

你到底想达到哪一部分？只是将<p> 与<h1> 的最后一行内联？
@DBS - 是的 - 我希望 <p> 始终位于 <h1> 的最后一行右侧 40px - 理想情况下也垂直居中。

标签： html css flexbox css-grid

【解决方案1】：

看看这个小提琴，可能会有所帮助，因为你只依赖 CSS https://jsfiddle.net/L670c1sg/

.atul {
  display: grid;
  grid-template-columns: repeat(400, .25%);
  grid-auto-rows: 50px; /* for demo only */
  grid-row-gap: 30px;   /* note that you need to create column gaps through
                           the proper distribution of columns, because if you
                           use `grid-column-gap`, it will add a gap between
                           all 400 columns */
}

.card:nth-child(1) {
  grid-column: 1 / 180;
  grid-row: 1 / 3;
}

.card:nth-child(2) {
  grid-column: -1 / -210; /* starting at the end line of the grid
                             (works only in explicit grids) */
  grid-row: 1 / 2;
}

.card:nth-child(3) {
  grid-column: -1 / -210;
  grid-row: 2 / 3;
}

/* starting at the 4th item, target even items only */
.card:nth-child(n + 4):nth-child(even) {
  grid-column: 1 / 195;
}

.card:nth-child(n + 4):nth-child(odd) {
  grid-column: -1 / -195;
}

.card:nth-child(4),
.card:nth-child(5) {
  grid-row: 3;
}

.card:nth-child(6),
.card:nth-child(7) {
  grid-row: 4;
}

.card:nth-child(8),
.card:nth-child(9) {
  grid-row: 5;
}

.card:nth-child(10),
.card:nth-child(11) {
  grid-row: 6;
}

.card:nth-child(12),
.card:nth-child(13) {
  grid-row: 7;
}

<div class="atul">
  <div class="card" style="background-color: red;">Card 1</div>
  <div class="card" style="background-color: green;">Card 2</div>
  <div class="card" style="background-color: yellow;">Card 3</div>
  <div class="card" style="background-color: skyblue;">Card 4</div>
  <div class="card" style="background-color: skyblue;">Card 5</div>
  <div class="card" style="background-color: skyblue;">Card 6</div>
  <div class="card" style="background-color: skyblue;">Card 7</div>
  <div class="card" style="background-color: skyblue;">Card 8</div>
  <div class="card" style="background-color: skyblue;">Card 9</div>
  <div class="card" style="background-color: skyblue;">Card 10</div>
  <div class="card" style="background-color: skyblue;">Card 11</div>
  <div class="card" style="background-color: skyblue;">Card 12</div>
  <div class="card" style="background-color: skyblue;">Card 13</div>
</div>

【讨论】：

【解决方案2】：

一次使用grid，一次使用flex，还有一个没有flex 或grid 的版本。

span {
  z-index: 1;
  position: absolute;
  color: hotpink;
  width: 100%;
  text-align: center;
}

.home-hero-banner-slide-title {
  width: 100%;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  width: 100%;
  border-radius: 5px;
}

h1 {
  margin-top: 5em;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

h1:first-child {
  margin-top: 0;
}

body {
  margin: 0;
}

.home-hero-banner-slide-title > div,
.wrapper > div,
.container > div {
  display: inherit;
}

<h1>W/ Flex</h1>

<div class="home-hero-banner-slide-title">
  <div>
    <span>Line 1</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 2</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 3</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <p class="home-hero-banner-slide-paragraph">paragraph here</p>
</div>

<h1>W/O anything</h1>

<div class="wrapper">
  <div>
    <span>Line 1</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 2</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 3</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
</div>

<h1>W/ Grid</h1>

<div class="container">
  <div>
    <span>Line 1</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 2</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 3</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
</div>

【讨论】：