把项目放在一起没有任何空间

我想创建一个3列的国家列表。我所做的到目前为止是：把项目放在一起没有任何空间

enter image description here

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; 
}

我不想离开行之间的任何空间如科摩罗和科特迪瓦之间的空间。我想要做的是： enter image description here

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

来源

2014-10-31 Ned

3个内嵌块部分呢？ – 2014-10-31 21:37:41

您可以考虑寻找到overflow CSS属性，如果你不介意被隐藏在国名的结尾。有了这个，你的CSS将成为类似：

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

这可以让你摆脱空间的同时还让他们按字母顺序显示在你的代码。我认为这也将在屏幕/窗口尺寸上更好地扩展。

有些方法可以让用户将鼠标悬停在方框上时显示“隐藏”内容。 Here's one example，但你可以找到更适合你的目标的其他人。

来源

2014-10-31 22:13:12 Tukaro

感谢您的解决方法。你会看看相关的问题吗？ HTTP：//计算器。com/questions/26716979 /溢出为背景颜色的文本 – Ned 2014-11-03 15:10:23

我会，但我看到有人在我可以之前得到它。 :) – Tukaro 2014-11-03 18:50:59

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

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

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

来源

2014-10-31 21:14:43 austinthedeveloper

在这种情况下，我将使用表格解决方案，表格是显示表格数据的最佳方法 – 2014-10-31 21:21:32

这些方法对于使高度相同很有用。在我的情况下，如果他们有不同的高度，那么他们就可以，因为他们中的一些人有更长的内容。我试图摆脱空白。我在我的问题中添加了一个新的截图。 – Ned 2014-10-31 21:32:44

box sizing: border-box;

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

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

来源

2014-10-31 21:30:19

把项目放在一起没有任何空间

回答

相关问题