Question

我正在尝试使用居中的内容区域进行全宽分割背景色。但是，内容不会排列，并且在调整屏幕大小时始终关闭。

最大宽度是居中内容区域的1200px，父div分割为60％/ 40％。当你进行数学计算时，它是720px / 480px并且应该匹配上面的div。

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
.site-content {
  clear: both;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 0;
  position: relative;
}
.site-content,
.left_container >div,
.right_container>div {
  border: 1px solid #000;
}
.left_container,
.right_container {
  padding-bottom: 100%;
  margin-bottom: -100%;
  /*Fixes float height*/
}
.left_container >div,
.right_container>div {
  position: relative;
}
.left_container {
  float: left;
  width: 60%;
  background-color: #ced7db;
}
.left_container > div {
  float: right;
  max-width: 720px;
}
.right_container {
  background-color: #999;
  float: right;
  width: 40%;
}
.right_container > div {
  max-width: 480px;
}

<header>
  <div class="site-content">
    <h1>Heading<h2>
    </div>
</header>
<div id="introduction" >
<div class="left_container">
    <div>
        <h2>Left</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div> 
<div class="right_container">
    <div>
        <h2>Right</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
</div>

这样做的结果是让标题区域和内容区域在左右边缘对齐，而背景延伸到浏览器的末尾。我尝试过使用渐变背景方法，仍然会抛出百分比宽度。

Answer 1

我无法完全按照自己的意愿行事所以我选择了父背景渐变方法。这里的例子： CSS: Set a background color which is 50% of the width of the window

拆分以背景为中心的内容

1 个答案: