无法计算我的响应表引导程序的宽度

Question

我试图制作负责任的牌桌。 http://codepen.io/Luiggi/pen/fLejw 在这里你有一些图片向你展示我的问题和我的布局。

第一版 第二个布局 第三种布局

50％和33％的牌桌从未到达最右边。

有人知道如何计算正确的宽度？我哪里错了？

我希望有人可以帮助我。

Answer 1

以下是您的代码的另一个版本：http://codepen.io/Nico_O/pen/nIqwE

您遇到的问题是，您使用表格进行布局。如果您将另外一个元素用作包装器，则可以使用逻辑宽度（如33.333％）作为列的三分之一。 Normaly你想要做这样的事情：

.row
{
   margin-left: -5px;
   margin-right: -5px;
}

.column
{
   float: left;
   padding-left: 2.5px;
   padding-right: 2.5px;
}

.column.three
{
    width: 33.333%
}

现在你可以这样做：

<div class="row">
    <div class="column three">
      Content
    </div>
    <div class="column three">
      Content
    </div>
    <div class="column three">
      Content
    </div>
</div>

结果很好。由于您的表是您的列，因此您不能使用这样的填充。对于这个例子，我这​​样做了：

.table.tablas50
{
  width:calc( 50% - 5px );
}

通过这种计算，您可以摆脱第一个和最后一个元素的左右边距。

我删除了媒体查询，您必须将该代码添加到其中。

Answer 2

你想要像 Demo

这样的东西吗？

table.tablas50 {
    width:49.86%;
    float:left;
}
table.tablas50.mright {
    margin-right:5px;
}
table.tablas33 {
    width:33.15%;
    float:left;
}
table.tablas33.mright {
    margin-right:5px;
}

将其更改为（在所有地方）

table.tablas50 {
    width:50%;
    float:left;
}
table.tablas50.mright {
    margin-right:0px;
}
table.tablas33 {
    width:33.33%;
    float:left;
}
table.tablas33.mright {
    margin-right:0px;
}