Question

我有一个设计需要用2列来完成，这些列中的内容需要与站点中使用的容器对齐。

我遇到的问题是设计上的第二列具有延伸至视口边缘的背景色。

如果您看下面的JSfiddle /代码，如果您在底部取消注释.col :: after代码，那么我有一个可行的解决方案，但是我希望可以有一种更简洁的方法来实现这一目标？

欢呼

html,
body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 80px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.col {
  padding: 80px;
  position: relative;
  width: 50%;
}

.col:last-child {
  background: grey;
}


/* .col:last-child::after {
        background: grey;
        content: '';
        position: absolute;
        height: 100%;
        left: 100%;
        top: 0;
        width: 500px;
    } */

<div class="container">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 class="grid">
    <div class="col">
      1
    </div>
    <div class="col">
      2
    </div>
  </div>
</div>

Answer 1

如何将网格移到最大宽度容器之外，然后在列内添加最大宽度：

这种方法在<html> <head> <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> </head> <body> up vote 0 down vote favorite <select id="questionnaire_domain" class="form-control sync-option-text required" name="questionnaire_domain" onchange="this.nextElementSibling.value = this.value + this.nextElementSibling.value.match(/(\d+)/)[1];"> <option value="ESS">Employee Satisfaction Survey</option> <option value="CSS">Customer Satisfaction Survey</option> <option value="VSS">Vendor Satisfaction Survey</option> <option value="OQ">Orientation Quiz</option> <option value="TQ">Training Quiz</option> <option value="EI">Exit Interview</option> <option value="EO">Employee Opinion</option> </select> <input class="form-control readonly" name="questionnaire_code" type="text" value="11" id="questionnaire_code" readonly=""> </body>上的优势

将始终是屏幕的宽度，而不管显示器的宽度是多少–之后的方法只能覆盖最大2400px的屏幕（我知道很多屏幕都没有这么大，但是有时您可能希望显示您在营销活动中的站点，而这些屏幕可能是
您不会在屏幕外创建一个额外的500px框用于较小的分辨率（这样可以减少手机和平板电脑等设备的渲染时间）
您不必在要扩展到边缘的每列上都使用hack
维护起来更好，更容易

after

html,
body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 80px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.col {
  position: relative;
  width: 50%;
}

.inner {
  max-width: 700px;
  padding: 80px;     /* move padding to inner */
}

.col:first-child .inner {
  margin-left: auto;   /* push this to the right if no wide enough to fill col */
}

.col:last-child {
  background: grey;
}

CSS-向容器内的列添加全宽列背景色的最佳方法

1 个答案: