Ввод предметов рядом друг с другом без пробелов

Question

Я пытаюсь создать список стран с тремя столбцами. То, что я сделал до сих пор является то, что:

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

Вы можете рассмотреть глядя в собственность overflow CSS, если вы не возражаете конец названия страны будучи спрятана. При этом, ваш CSS станет что-то вроде:

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

Это позволяет избавиться от пространств, все еще имея их в алфавитном порядке, в вашем коде. Я думаю, что это также будет лучше масштабироваться по размеру экрана/окна.

Есть способы, чтобы «скрытое» содержимое показывалось, когда пользователь мыши над коробкой. Here's one example, но вы можете найти другие, которые лучше подходят для ваших целей.

Answer 2

Это недостаток плавающей. Когда есть разные высоты, divs начнут застревать по краям больших. Есть 3 способа исправить это:

• Используйте плагин jQuery, который выравнивает все высоты, как то, что Foundation does.
• Дайте .flagColumn min-height, которая больше, чем самая большая. Это сделает их высоты равными, но может дать больше места, чем вам хотелось бы.
• Переключите их из сетки div в сетку таблицы. Столы имеют свое место, и эта ситуация может быть для этого подходящей. Избегайте этого предположения, если сетка меняет ширину. Используйте это, если .flagColumn всегда 33%.

Если бы это зависело от меня, я бы использовал 1-й или 2-й вариант. Свойства таблицы могут быть изменены для работы с медиа-запросами, если это необходимо.

Answer 3

box sizing: border-box; 

border-size: border-box; твой друг. Посмотрите на мою jsfiddle:

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