Question

我不确定为什么我在这个小问题上遇到这么困难，但我无法像我想要的那样得到容器的填充集。我希望有一个百分比填充，基于要应用于#contact-section的主容器#contact-section-wrap。我尝试的一切都行不通。我尝试将position:relative;应用于#contact-section，但我所做的一切都不起作用。

Here is a jsfiddle as well.

＆＃13;

#contact-section {
  height: 150px;
  width: 100%;
  background: #00a16d;
}
#contact-section-wrap {
  width: 100%;
  height: 100%;
  padding: 5%;
}
#contact-section-left,
#contact-section-right {
  height: 100%;
  display: inline-block;
  color: #FFF;
  font-size: 1.5em;
}
#contact-section-left {
  width: 60%;
  border-right: 1px solid #FFF;
}
#contact-section-right {
  width: 30%;
}

＆＃13;

<div id="contact-section">
  <div id="contact-section-wrap">
    <div id="contact-section-left">
      Tell us more about your project.
    </div>
    <div id="contact-section-right">
      Contact us
    </div>
  </div>
</div>

＆＃13;

Answer 1

尝试使用以下代码为所有#contact-section子元素添加框大小：

#contact-section * {
    box-sizing: border-box;
}

Answer 2

删除Shape *上的固定height: 150px;，同时删除几个内部元素上的#contact-section，width，它应该没问题。

＆＃13;

height

＆＃13;

#contact-section {
  /* height: 150px; */
  width: 100%;
  background: #00a16d;
}
#contact-section-wrap {
  /* width: 100%; */
  /* height: 100%; */
  padding: 5%;
}
#contact-section-left,
#contact-section-right {
  /* height: 100%; */
  display: inline-block;
  color: #FFF;
  font-size: 1.5em;
}
#contact-section-left {
  width: 60%;
  border-right: 1px solid #FFF;
}
#contact-section-right {
  width: 30%;
  padding-left: 10px;
}

＆＃13;

Answer 3

弹性盒怎么样？这很容易，就像这样：

#contact-section {
  height: 150px;
  width: 100%;
  background: #00a16d;
  display: flex;
  align-items: center;
  justify-content: center;
}
#contact-section-wrap {

}

Answer 4

问题是#contact-section包含填充，而不是其父元素#contact-section-wrap。

将padding: 5%;从#contact-section-wrap移至#contact-section，然后将box-sizing: border-box添加到#contact-section。

box-sizing基本上决定填充和边框是否应包含在元素的总宽度和高度中。在您的情况下，您希望它们包含在内，以便padding: 5%中包含width:100%（否则您的总宽度为110％）

示例：https://jsfiddle.net/cs3wtwor/2/

Answer 5

如果您想保留当前的方法，则需要box-sizing: border-box;。

默认情况下，如果您设置width: 100%和padding: 5%，则元素的实际宽度计算为110％（左侧填充和右侧= 10％）。

如果您使用box-sizing: border-box;，则实际元素宽度与width值匹配。（这同样适用于height）

#contact-section {
  height: 150px;
  width: 100%;
  background: #00a16d;
}
#contact-section-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 5%;
}
#contact-section-left, #contact-section-right {
  height: 100%;
  display: inline-block;
  color: #FFF;
  font-size: 1.5em;
}
#contact-section-left {
  width: 60%;
  border-right: 1px solid #FFF;
}
#contact-section-right {
  width: 30%;
}

<div id="contact-section">
  <div id="contact-section-wrap">
    <div id="contact-section-left">
      Tell us more about your project.
    </div>
    <div id="contact-section-right">
      Contact us
    </div>
  </div>
</div>

在部分容器周围填充

5 个答案: