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

【问题标题】：Fixed width layout with one child spanning full screen width固定宽度布局，一个孩子跨越全屏宽度
【发布时间】：2017-07-05 01:37:18
【问题描述】：

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

我无法更改标记。

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

这是一个示例标记，您可以发布解决方案。

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>;
}

【问题讨论】：

相关 - stackoverflow.com/questions/28565976/…
基本上，除非全宽元素仅用于样式设置...在不更改 HTML 的情况下，您不能单独使用 CSS 执行此操作，因为您已经施加了约束。
@Paulie_D：我就是这么想的，但我想确保我没有遗漏任何东西。谢谢。顺便说一句，我认为 CSS Grid 允许这样做，但我们都知道到目前为止它的支持有多差。
您也许可以将它们包装在 2 个不同的容器中 - 1 个用于全宽 div 上方的容器，另一个用于其下方的容器。这是我能想到的唯一方法

标签： css

【解决方案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

【讨论】：

确实有效！正是我想要的。谢谢！我做了一支笔来试验你的解决方案：codepen.io/anon/pen/vZrNXm。您可以将其链接到您的答案；也许有人会觉得它有帮助
不幸的是 width: 100vw; 引入了另一个问题 - 垂直滚动条（如此处所述：stackoverflow.com/questions/23367345/…）。但这个答案通过了问题的所有标准，所以我接受它。
今天我发现设置html { overflow-y: scroll; } 解决了滚动条的问题。我建议将其添加到您的答案中。

【解决方案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>

这里有问题的部分是负边距的尺寸。如果您使用%，它将与fixed-width-container 的width 相关。在这里，我选择了width: 70%。给定 625px 的正文宽度（就像 Stack Snippet 预览的情况一样）和 -24% 的边距，这将给出 625px * 0.7 * 0.24 = 105px 的负边距。我不确定使这项工作适用于任何配置的最佳方法是什么。

【讨论】：