Question

我遇到的全宽div具有不同的％宽度的问题，并且在其中固定内容并将其与另一个全宽div对齐的问题。 JS Fiddle应该更好地解释这一点。

<header> <!-- 100% width -->
 <div></div> <!-- 100% width; max-width: 1000px; margin: auto -->
</header>

如果是单列，则上面的方法可以正常工作。

我想在其下面放置两个div，一个div占33％，另一个div占67％，并且使其中的内容与上面的工作方式相似。 max-width div是可见的内容容器。因此，如果您在大屏幕上浏览该网站，那么所有内容都是边缘到边缘的，但是其中的内容将被置于中间。

样本小提琴，其中具有2和3的div应该占用与其上方的div相同的空间。 http://jsfiddle.net/qtLe7o8f/1/

header {
  background: blue;
  padding: 15px 0;
}
header div {
  max-width: 500px;
  background: red;
  margin: auto;
}

section.one {
  float: left;
  width: 33%;
  background: green;
  padding: 15px 0;
}
section.one div {
  background: red;
  float: right;
}

section.two {
  float: left;
  width: 67%;
  background: orange;
  padding: 15px 0;
}
section.two div {
  background: red;
  float: left;
}

<header>
  <div>
  1
  </div>
</header>
<section class="one">
  <div>
    2
  </div>
</section>
<section class="two">
  <div>
    3
  </div>
</section>

Answer 1

我想这就是你要做什么？它使用一些嵌套的flexbox定义进行设置，以便外部容器可以边到边延伸，但是子元素会保持最大宽度并共享可用空间。

const missingFields = [];

fields.forEach((field) => {
  try {
    const value = field.getValue();
    // Process the field's value.

    // Could be just field.validate();
  } catch (e) {
    missingFields.push(field.getName());
  }
});

if (missingFields.length > 0) {
  throw new MissingFieldsError(
      missingFields, 'Some required fields are missing.');
}

header {
  background: blue;
  padding: 15px 0;
  display: flex;
  justify-content: center;
}

header div {
  flex: 0 0 500px;
  background: red;
}

.container {
  display: flex;
  justify-content: center;
  background-color: #ace;
}

.content {
  display: flex;
  flex-flow: row wrap;
  width: 500px;
}

section.one {
  flex: 0 0 33%;
  background: green;
  padding: 15px 0;
}

section.two {
  flex: 0 0 67%;
  background: orange;
  padding: 15px 0;
}

section.one div, section.two div {
  background: red;
}

Answer 2

如果您希望将橙色和绿色背景色扩展到桌面屏幕的边缘，则应该这样做。由于使用了Bootstrap Grid

，这还将为您的移动设备列重新排序

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 section-1-container">
        1
      </div>
    </div>
  </div>
</header>
<div class="custom-container">
  <div class="container">
    <div class="row">
      <div class="col-sm-4 section-2-container">
        <section class="one">
          <div>
            2
          </div>
        </section>
      </div>
      <div class="col-sm-8 section-3-container">
        <section class="two">
          <div>
            3
          </div>
        </section>
      </div>
    </div>

{{1}}

具有最大宽度内容的全宽div

2 个答案: