固定宽度布局，一个孩子跨越全屏宽度

Question

我可以创建如下图所示的布局，同时仅在父容器上设置固定宽度吗？我也无法在全屏宽度子上使用position: absolute; left: 0; right: 0;，因为我无法将其从流中删除，因为它的大小是动态的。

我无法更改标记。

我能想到的唯一解决方案是分别在每个固定宽度的孩子上设置固定宽度，但由于我有很多，这不是最舒服的解决方案 - 意味着添加一个类对于我添加到父容器中的每个孩子。

以下是您可以发布解决方案的示例标记。

HTML 的

<div class="fixed-width-container">
  <div class="regular-child"></div>
  <div class="full-screen-width-child"></div>
  <div class="regular-child"></div>
  <div class="regular-child"></div>
</div>

CSS

.fixed-width-container {
  width: <some-fixed-width>;
}

Answer 1

您可以尝试使用flex布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

body {
  margin: 0;
}

div {
  border: 1px solid #333;
}

.fixed-width-container {
  width: 400px;/* any width set */
  margin: auto;
  padding: 10px 10px 0;
  background: yellow;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.fixed-width-container>div {
  height: 3em;
  margin-bottom: 10px;
  background: lightblue;
  min-width: 100%;
}

.full-screen-width-child {
  width: 99vw;/* 100vw is fine too */
}

<div class="fixed-width-container">
  <div class="regular-child">Fixed-width child</div>
  <div class="full-screen-width-child">Full screen width child with dynamic contents</div>
  <div class="regular-child">Fixed-width child</div>
  <div class="regular-child">Fixed-width child</div>
</div>

codepen to test and play with

Answer 2

这只是一次尝试，可能不是一次非常好的尝试。但也许它会产生一些其他人甚至是你自己的更复杂的解决方案。

想法：全角儿童的负边距。

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  width: 100%;
  background: #fff;
}

div {
  border: 1px solid #333;
  margin-bottom: 10px;
}

div:last-child {
  margin-bottom: 0;
}

.fixed-width-container {
  width: 70%;
  margin: auto;
  padding: 10px;
  background: LightYellow;
}

.regular-child,
.full-screen-width-child {
  height: 45px;
  line-height: 45px;
  background: LightBlue;
}

.full-screen-width-child {
  margin-left: -24%;
  margin-right: -24%;
  background: LightGreen;
}

<div class="fixed-width-container">
  <div class="regular-child">Fixed-width child</div>
  <div class="full-screen-width-child">Full screen width child with dynamic contents</div>
  <div class="regular-child">Fixed-width child</div>
  <div class="regular-child">Fixed-width child</div>
</div>

这里有问题的部分是负边距的维度。如果您使用%，则会与width的{​​{1}}相关联。在这里，我选择了fixed-width-container。给定width: 70%的正文宽度（与Stack Snippet预览的情况一样）和625px的边距，这将给出-24%的负边距。我不确定什么是使这种方法适用于任何配置的最佳方法。