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 =＆＃34; thumbnail＆＃34;

具有相同的宽度

感谢任何帮助。

Answer 1

我现在知道这篇文章的答案。我仍然要发布答案，这样可以帮助其他开发人员。

解决这个问题的关键是删除class =“column”的左右填充。删除左右填充后，我们现在可以将食物面板类的宽度最大化为100％。

如何在父类填充中包含子div？

1 个答案: