Question

我在页面中有一点我希望此部分为容器div的100％宽度。正如你在下面的图片中看到的那样，左边的空白是填充，是.article-wrapper-pro的一个属性，基本上我想要覆盖它，所以没有填充？

Padding

代码：

<div class="article-wrapper-pro">
  <div class="row">
    <div class="small-12 medium-8 columns about-border">
      <article class="padd">
        <h3 class="about-intro">YADDA YADDDA YADDA</h3>
        <p>YADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDA</p>
        <p>YADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDA</p>
        <h2>Take a look</h2>
        <div class="about-images">
          <img src="img/oakview-screen.jpg" alt="e" </img>
        </div>
      </article>
      <div class="work-with-us">
        <h2 class="about-serv">Work with us</h2>
        <p>IYADDA YADDDA YADDAYADDA YADDDA YADDA</p>
      </div>
    </div>
    <div class="medium-4 columns about-images show-for-medium-up project-side">
      <img class="project-logos" src="img/oakview-logo.jpg" alt="Oak View Logo" </img>
      <div class="side-section">
        <h3 class="about-side-headings">Services</h3>
        <div class="about-list-side">
          <ul>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
          </ul>
        </div>
        <h3 class="about-side-headings">YADDA YADDDA YADDA</h3>
        <div class="about-list-side">
          <ul>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

使用负边距。

考虑以下情况：

<强> HTML：

<div class="container">
    <div class="box-to-override">
    </div>
</div>

<强> CSS：

.container {
    width: 500px;
    background: red;
    padding-left: 40px;
    padding-top: 100px; /* Only to demonstrate */
}

.box-to-override {
    margin-left: -40px;
    background: #CCC;
    min-height: 300px; /* Only to demonstrate */;
}

margin-left类中的.box-to-override使div扩展到.container中的填充集。

这里是FIDDLE

覆盖容器中的填充和边距

1 个答案: