css - 容器宽度为 "restrcited"的两个颜色部分全宽

Question

这个想法是页面的某些部分按列有两种颜色:
[左侧列红色] [右侧列绿色]
所以基本上现在的 html 看起来像这样。

<section id="foo">
 <div class="wrapper-content">
  <div class="col-sm-5 bg-red">Some content</div>
  <div class="col-sm-7 bg-green">Some Other Content</div>
 </div>
</section>

这给了我我需要的外观，全宽 2 列，颜色不同，问题是容器。第一张图是我需要的
第二张图片是我得到的


以下代码根本不起作用....

<section id="foo">
 <div class="wrapper-content">
  <div class="col-sm-5 bg-red same-height"></div>
  <div class="col-sm-7 bg-green same-height"></div>
  <div class="container absolute">          
   <div class="col-sm-5">Some content</div>
   <div class="col-sm-7">Some Other Content</div>
  </div>
</div>

左边的颜色必须一直向左，右边的颜色一直向右，但内容必须保持居中并位于两列之间。
有任何想法吗？

Answer 1

你必须添加一个 container类到您的内容部分。

或者将您的内容部分放入 header 包装器 div。

示例:如果您的标题 div 被类 <div class="container">...</div> 包裹, 也用这个类包装内容 div。

示例 1:如果您想要标题和内容的不同部分

<div class="container">
    <div>Header</div>
</div>
<div class="container">
    <div>Your content section</div>
</div>

示例 2:如果您不需要将标题和内容部分分开

<div class="container">
    <div>Header</div>
    <div>Your content section</div>
</div>