完整的背景和固定的内容

2022-01-18 00:00:00 grid layout html css css-position

我有以下两个总宽度应为 1400 像素的容器.我的代码中的问题是，当我希望两个容器为 1400 像素时，背景不是 100% 宽度.

I've got the following two containers that should be 1400px width in total. The problem in my code is that the background isn't 100% width when I want the two containers to be 1400px.

我怎样才能以最好的方式实现这一目标?我希望你们能解决我的问题.

How can I achieve this the best way? I hope you guys get my problem.

我正在使用以下代码:

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 50px;
}

#left-container {
  width: 50%;
  background: blue;
  float: left;
}

#right-container {
  width: 50%;
  background: green;
  float: left;
}

<div class="wrapper">

  <div id="left-container">

    <h2>Left container</h2>

  </div>

  <div id="right-container">

    <h2>Right container</h2>

  </div>

</div>

推荐答案

可以通过多种方式完成.我现在能想到的最简单的解决方案就是添加一个容器并使用线性渐变:

It can be done in many ways. The most simple solution I can think of now is to add a container and use a linear gradient:

body {margin:0; padding:0;}
.container {
  background: linear-gradient(to left, blue 50%, green 50%);
}
.wrapper {
  border: 1px solid white;
  max-width: 1400px;
  margin: 0 auto;
  overflow: auto;
}

#left-container,
#right-container{
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-left: 50px;
}

<div class="container">
  <div class="wrapper">
    <div id="left-container">
      <h2>Left container</h2>
    </div>
    <div id="right-container">
      <h2>Right container</h2>
    </div>
  </div>  
</div>

相关文章