Question

我正在尝试在使用width:50%的{{1}}上设置div.book__form，但不需要padding:6rem。当我删除50%时，实际上需要padding:6rem，但我需要设置50%。

在Chrome浏览器的检查元素中，它显示padding:50%，但我没有写下来。

css

display:block

html

.book {
  background-image: linear-gradient(105deg, 
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
    url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
}
.book__form {
  width: 50%;
  padding: 6rem;
  background-color: pink;
}

result

Answer 1

使用width 50%后并不需要精确的padding，因为您没有在css box-sizing: border-box;中使用通用标签，这在使用填充时是必需的。

谈论Chrome浏览器的检查元素，该元素显示display:block是user agent stylesheet中浏览器的默认格式。

*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

<div class="book__form">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ad nobis nulla porro. Non alias nisi ad omnis animi neque at repellat, sit nulla voluptate quod, dolorum, repellendus magni placeat.</p>
    </div>

Answer 2

我尝试弄乱填充，这是我的结果：

第一个仅填充顶部和底部的填充。

.book {
  background-image: linear-gradient(105deg, 
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
    url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
}
.book__form {
  width: 50%;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: pink;
}

<div class="book">
   <div class="book__form"></div>
</div>

左和/或右填充似乎使其超过50％

.book {
  background-image: linear-gradient(105deg, 
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
    url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
}
.book__form {
  width: 50%;
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-right: 6rem;
  padding-left: 6rem;
  background-color: pink;
}

<div class="book">
   <div class="book__form"></div>
</div>

希望这会有所帮助。

Answer 3

看起来对我来说很好，至少设置了50％的宽度和6rem的填充。但是，如果您未为其指定宽度，则图像将以其默认大小（在本例中为1204x170）呈现。如果结果大于容器的宽度（在这种情况下），则图像将溢出容器。我认为这就是您的意思，“不占50％”。

因此，在此示例中，我仅添加了一些CSS来将图像的宽度设置为容器大小的100％，如果我理解了，您将看到它现在将“占用50％”。正确表示该短语的含义。

最后，如果我可以这样说，您还将从答案中看到，您对问题有几种不同的解释。也许您可以考虑一下为什么我们中的某些人错过了您的意思，并想出一些方法来问您的问题，以将其最小化。

.book__form {
    width: 50%;
    padding: 6rem;
    background-color: pink;
}

.book__form img {
    width: 100%;
}

<div class="book">
  <div class="book__form">
    <img src="https://i.stack.imgur.com/lzr8y.jpg">
  </div>
</div>

如何设置div的宽度

3 个答案: