Question

我的页面分为宽度有限的行。（<div class='row'>）我想对每一行应用背景（颜色），但我希望背景不要考虑div的宽度限制，有没有办法实现这个？

谢谢！

Answer 1

你想要这样的事吗？如果您提供了一个小提琴或至少一些代码，这样我们就可以帮助您解决问题。

我来到这个解决方案：

<div class="row1">
    ...
</div>

<div class="row2">
    ...
</div>

.row1 {
    background-color: red;
    width: 100%;
    height: 50%;
}
.row2 {
    background-color: pink;
    width: 100%;
    height: 50%;
}

您可以在此处运行：JSFiddle

Answer 2

这可以使用伪元素，不需要额外的HTML。

.wrapper {
  width: 50%;
  margin: auto;
}
[class^=row] {
  height: 50px;
  position: relative;
  margin-bottom: 10px;
}
[class^=row]:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 100vw;
  background: purple;
  z-index: -1;
}
.row1 {
  background-color: red;
}
.row2 {
  background-color: pink;
}

<div class="wrapper">
  <div class="row1">...</div>
  <div class="row2">...</div>
</div>

Answer 3

您可能最好将每行放置在.container-fluid div中，其中{min-width：100％}和自定义类为您需要的颜色

.container-fluid {
  min-width: 100%
}
.row {
  max-width: 300px;
  margin: 0 auto;
  padding: 10px;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div class="container-fluid red">
  <div class="row">
    <p>Row Content 1</p>
  </div>
</div>
<div class="container-fluid green">
  <div class="row">
    <p>Row Content 2</p>
  </div>
</div>
<div class="container-fluid blue">
  <div class="row">
    <p>Row Content 3</p>
  </div>
</div>

CSS：在具有固定宽度的div中将背景应用于全宽

3 个答案: