全宽背景颜色，不会影响字体

Question

我正在尝试创建一个全屏宽度的黑色背景部分。最初，黑块正在根据父div获得截止，所以我添加了下面的css。现在文本不再符合前一个div的宽度。是否有一种更简单的方法可以使背景黑色和全宽度为“黑块＆＃34;在不影响部分内文字宽度的情况下？任何帮助都会很棒！

＆＃13;

＆＃13;

.black-block {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

＆＃13;

<div class="black-block" style="margin-top:10%;background:#1f1f1f;padding-top:10%;padding-bottom:10%">
  <p style="text-transform:uppercase;margin-bottom:-2%;font-weight:800;color:#3186d2">Design Direction</p>
  <h2 style="color:#ffffff">Focus on developing a lighting solution that is both functional by providing tailored lighting while providing a decorative element.</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来你需要在黑块中加入另一个div

HTML

<div class="black-block" style="margin-top:10%;background:#1f1f1f;padding-top:10%;padding-bottom:10%">
    <div class="comtainer">
        <p style="text-transform:uppercase;margin-bottom:-2%;font-weight:800;color:#3186d2">Design Direction</p>
    <h2 style="color:#ffffff">Focus on developing a lighting solution that is both functional by providing tailored lighting while providing a decorative element.</h2>     
    </div>

</div>

CSS

.black-block{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.container{
    width: 80vw; // or whatever width you're using
    margin: 0 auto;
}

Answer 2

我不确定我是否得到它，但我认为你正在尝试这样做？只需在CSS中将body和html填充和边距添加到0即可。

https://jsfiddle.net/4eg1dv7k/

body, html {
  padding: 0;
  margin: 0;
}

我不确定我的问题是否正确，但如果我这样做，我认为这个位置相对不适用于左边和右边。对。加上这些差额可能导致问题？再一次，我不太明白你的问题。

Answer 3

但父母的屏幕宽度是多少？如果是，我会建议使用width: 100%

box-sizing: border-box;将使元素宽度/高度+填充+边框适合给定的宽度/高度。 （不适用于保证金）

喜欢这个？：

body
{
  margin: 0px;
}
.black
{
  box-sizing: border-box;
  color: white;
  background-color: black;
  width: 100vw;
  padding: 20px 80px;
}

<div class="black">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

Answer 4

您可以将<p>和<h2>元素包含在设置了不同宽度的另一个<div>中。像这样：

<div class="black-block">
  <div style="width: 60%; margin-right: auto; margin-left: auto;">
    <p></p>
    <h2></h2>
  </div>
</div>