html - 包含 50% 宽度水平 div 的内容到整个包装宽度 (1200px)

Question

我想实现一种越来越流行的设计 - 两个 50% 宽度的 div 水平对齐 (.tile)，但它们的内容跨越两个 div 限制为整体最大宽度(等于网站其余部分的页面包装器，例如 1200 像素)。我让它们向左浮动以实现水平对齐，每个都有对比色。想象一个横跨 2 个 div 的居中“覆盖”包装器。下面的代码有望解释我的设置:

CSS

.full-width-row {
    width: 100%; // 100% of entire page so child divs bg color will stretch
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: auto;
    position: relative;
}
.tile {
    width: 50%;
    float: left;
    height: 100%;
    margin-bottom: -99999px;
    padding-bottom: 99999px // hack to fill height of parent
}
.tile-content {
    padding: 5%;
}
.left {
    background: #FFC15E;
}
.right {
    background: #3E7F72;
}

HTML

<div class="full-width-row">
    <div class="tile left">
        <div class="tile-content">

                    //CONTENT LEFT  

        </div>
    </div>
    <div class="tile right">
        <div class="tile-content">

                    //CONTENT RIGHT

        </div>
    </div>
</div>

此处的父元素 (.full-width-row) 是整个窗口的 100%，因此 2 个子 div 的背景颜色将拉伸(stretch)整个页面。我希望在最大定义宽度(等于 1200 像素)内表现出这些子项中的内容。有没有人构建过类似的布局或对如何实现此布局有任何建议？

我猜右侧的 div 永远不会成为问题，因为它始终位于 1200 像素的包装空间中，但左侧的 div 会在更大的屏幕上继续向左移动。

Answer 1

我不完全确定你想要什么，但如果它是关于将外部容器居中，你可以简单地应用 margin: 0 auto 到它。我在下面的代码片段中这样做并添加了 max-width: 500px 以使其在代码片段窗口中立即可见(您当然可以将其设置为 1200px)。

注意:使用 margin: 0 auto 居中仅在元素具有 position 设置时有效，您的示例就是这种情况。)

html, body {
margin: 0;
}
.full-width-row {
  width: 100%; // 100% of entire page so child divs bg color will stretch
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: auto;
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.tile {
  width: 50%;
  float: left;
  height: 100%;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  background: #ddd;
}

.tile-content {
  padding: 5%;
}

.left {
  background: #FFC15E;
}

.right {
  background: #3E7F72;
}

<div class="full-width-row">
  <div class="tile left">
    <div class="tile-content">

      //CONTENT LEFT

    </div>
  </div>
  <div class="tile right">
    <div class="tile-content">

      //CONTENT RIGHT

    </div>
  </div>
</div>