将物品放在彼此旁边，没有任何空间

Question

我试图创建一个包含3列的国家/地区列表。到目前为止我所做的是：

HTML：

<div class="flagList">
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
...
</div>

CSS：

.flagList {
    margin-bottom:20px;
    width: 100%;
    float: left;
    font-family: Calibri, Verdana;
    font-size:14px;
    line-height:13px;
    border:1px solid;
}

.flagColumn {
    width: 33%;
    float: left;
    border:1px solid;
}

我不想在行之间留下任何空间，例如科摩罗与科特迪瓦之间的空间。我想做的是：

我应该如何更改我的代码？

Answer 1

这是浮动的缺点。当有不同的高度时，div会开始卡在较大的边缘上。有3种方法可以解决这个问题：

• 使用jQuery插件来均衡所有高度，例如Foundation does。
• 给.flagColumn一个比最大值更大的最小高度。这将使他们的高度相等，但可能会提供比你想要的更多的空间。
• 将这些从div网格切换到表格。表有它们的位置，这种情况可能适合它。如果网格改变宽度，请避免使用此建议。如果.flagColumn始终为33％，请使用此选项。

如果由我决定，我会使用第一或第二选项。如果需要，可以更改表属性以使用媒体查询。

Answer 2

box sizing: border-box;

border-sizing：border-box;是你的朋友。看看我的jsfiddle：

http://jsfiddle.net/wr1zL2ax/3/

Answer 3

如果您不介意隐藏国家/地区名称的末尾，可以考虑查看overflow CSS属性。有了这个，你的CSS就会变成：

.flagColumn {
    width: 33%;
    float: left;
    border:1px solid;
    height:1em;
    overflow:hidden;
} 

这使您可以摆脱空格，同时仍然在代码中按字母顺序显示空格。我认为这也可以在屏幕/窗口大小上更好地扩展。

当用户将鼠标放在盒子上时，有一些方法可以显示“隐藏”内容。 Here's one example，但您可以找到更符合您目标的其他人。