Question

我希望实现越来越受欢迎的设计 - 两个50％宽度的div水平对齐（.tile），但它们的内容跨两个div 限制为整体 max 宽度（等于站点其余部分的页面包装器，例如1200px）。我让它们向左浮动以实现水平对齐，每个都具有对比色。想象一下中心的覆盖物＆＃39;跨越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的bg颜色将拉伸整个页面。它是我想在最大定义宽度（等于1200px）内表现的这些孩子内部的内容。有没有人建立类似的布局或有任何关于如何实现这一目标的建议？

我猜右手边的div永远不会出现问题，因为它总是在1200px的包装空间中，但左手会在更大的屏幕上继续向左移动。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是一个难以解释的解释，但感谢大家的尝试。我的解决方案毕竟相当直接。在左侧内容类中，我还添加了一个新类＆＃39; restrict＆＃39;

.restrict {
    max-width: 600px;
    float: right;
}

这将左侧推向距离中心（页面包装的一半）600px的屏障，同时保持父级50％div的颜色以拉伸整页。具有讽刺意味的是，现在我已经看到了它，我想我可能只是将内容div集中在一起

包含50％宽度的内容horiz divs到整体包装宽度（1200px）

2 个答案: