Question

我有一个包含3列的网格，其中的div都有width: 33.333334%和padding 0 10px。

然后在内部我有一个div，内容是position: absolute坚持到这个div的底部，它需要相对于没有填充的网格div width: 100%。

示例HTML

<div class="grid-item">
    <a href="#">
        <div class="grid-item-content"></div>
    </a>        
</div>

CSS / LESS

.grid-item {
  width: calc(100% / 3);
  padding: 0 10px;

  a {
    display: block;
  }

  .grid-item-content {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
}

我已尝试Calc(100% - 20px)，但这减去了20％而不是像素。

还发现box-sizing: padding-box;在除Firefox之外的所有浏览器中都不受支持，因此也没有帮助。

我也使用LESS所以任何＆＃34; LESS only＆＃34;解决方案将正常工作。

Answer 1

您可以使用

box-sizing: border-box;

与padding-box不同，border-box具有更好的浏览器支持。

Answer 2

HTML

<div class="grid-item">
<div class='s'>
    <div class="grid-item-content">text</div>
</div>
</div>

CSS

.grid-item {
   position:relative;
   width:33%;
   padding: 0 10px;
   }
.grid-item .s{
   position:relative;
   padding:0 10px;
   }
.grid-item-content {
   width: 100%;
   position: absolute;
   bottom: 0;

}

http://jsfiddle.net/HzZW7/

Answer 3

如果grid-item-content是grid-item div的唯一子项，则只需删除填充。从您发布的代码中，似乎没有理由。如果你在div中有其他物品需要远离边缘，请给它们一个边距。

带有填充的div，子宽度为100％

3 个答案: