javascript - 如何将子 div 放入父类的填充内？

Question

我正在使用 Foundation CSS 前端框架在行内创建列。

<div class="row small-up-2 large-up-3 food-container">
  <div class="column food-wrap">
    <img src="http://placehold.it/500x500&amp;text=Thumbnail" class="thumbnail">

    <div class="panel food-panel-top">
        <p>Description</p>
    </div>

  </div>
  <div class="column food-wrap">
    <img src="http://placehold.it/500x500&amp;text=Thumbnail" class="thumbnail">

    <div class="panel food-panel-top">
        <p>Description</p>
    </div>

  </div>
  <div class="column food-wrap">
    <img src="http://placehold.it/500x500&amp;text=Thumbnail" class="thumbnail">

    <div class="panel food-panel-top">
        <p>Description</p>
    </div>
  </div>

</div>

这是我的 CSS:

 .column, .columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
}


.food-wrap { position: relative; }

.food-wrap > .panel {
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}


.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }

.food-wrap .thumbnail {
    border: medium none;
    box-shadow: none;
}

问题:每个类 .foodwrap 都有一个左右填充。我希望将类 .food-panel-top 包裹在 .foodwrap 的填充内。当我将 .food-panel-top 的宽度设置为 100% 时会发生什么，它超出了限制。我希望 .food-panel-top 与 class="thumbnail"具有相同的宽度

感谢任何帮助。

Answer 1

我现在知道这篇文章的答案了。我仍然会发布答案，以便它可以帮助那里的其他开发人员。

解决这道题的关键是去掉class="column"的左右padding。删除左右填充后，我们现在可以将食物面板类的宽度最大化到 100%。