HTML/CSS：如何实现这种交叉状的页面布局？

实现以下HTML页面布局的最佳方法是什么？

+----------------+-----------+----------------+
| space-TL       | content-T |       space-TR |
+----------+-----+-----------+-----+----------+
| space-CL |       content-C       | space-CR |
+----------+-----+-----------+-----+----------+
| space-BL       | content-B |       space-BR |
+----------------+-----------+----------------+

这里，四角的4个space-*框（space-T*和space-B*）必须具有相等的宽度，而content-C必须水平居中，但可以比content-T或content-B宽。所有3个content-*框的宽度可变，具体取决于其内容。

我试着在所有3个content-*盒子上设置水平margin: auto和max-width的组合，这似乎工作得相当不错。但是，如果content-T太窄，那么space-TL变得比space-BL更宽。
我正在考虑在外部容器上使用display: grid，但这对我来说似乎有点过分，因为我需要为6个space-*元素中的每一个元素提供显式的盒子。
所以也许我会做一个3列的布局，然后只允许content-C延伸到中间列之外的overflow: visible？

你会怎么做？
框的高度不是那么相关，并且可以是依赖于内容的。
谢谢！

有用的信息是角是否具有已知的固定宽度，以及中心块的内容是图像还是 Package 文本。基于给出的有限信息，我想出了这个使用三行flexbox的解决方案。
第一列和第三列的flex-grow和flex-shrink为0，flex-basis为200px flex: 0 0 200px。
在中间行中，这些外部列指定为flex-shrink: .5，中心列指定为flex-grow: 1。所有外部列都将是200px宽，除非中心内容需要更多的空间并缩小相邻列。

.row {
  display: flex;
  gap: .5em;
  }

.row div {
  margin-block: .25em;
  padding: .5em;
  border: 1px solid;
  }

.row div:nth-of-type(1),
.row div:nth-of-type(3) {
  flex: 0 0 200px;
  }

.middle div:nth-of-type(1),
.middle div:nth-of-type(3) {
  flex-shrink: .5;
  }

.middle div:nth-of-type(2) {
  flex-grow: 1;
  text-align: center;
  }

figure {
  width: 500px;
  aspect-ratio: 2;
  margin: auto;
  border: 1px solid;
  }

<div class="row">
  <div>space-TL Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
  <div>content-T Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
  <div>space-TR Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
</div>
<div class="middle row">
  <div>space-CL Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
  <div>content-C<figure></figure></div>
  <div>space-CR Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
</div>
<div class="row">
  <div>space-BL Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
  <div>content-B Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
  <div>space-BR Here, the 4 space-* boxes in the corners (space-T* and space-B*) must be of equal width, whereas content-C must be horizontally centered but can be wider than either content-T or content-B. All 3 content-* boxes are of variable width, depending on their content.</div>
</div>

HTML/CSS：如何实现这种交叉状的页面布局？

1条答案

相关问题

热门标签

最新问答