CSS Таблицы и интервал

Question

Я новичок в CSS-таблицах, это мой первый раз. Поэтому я обнаружил, что когда вы устанавливаете в div, вы можете забыть все margin и padding (и все, что), которые вы планируете в будущем, их игнорируют. Ницца. Единственное свойство, которое я нашел для этой работы, - border-spacing, но он немного ограничен по сравнению с margin и padding. Он имеет только два способа стилизации, горизонтальный и вертикальный. Вы не можете установить значение той стороны, которую хотите, например, border-spacing-left или border-spacing: 0 1px 2px 3px.

В моем случае у меня есть стол с одним рядом, который находится в правом верхнем углу экрана. Я хочу, чтобы он был прикреплен на самом верху и разнесен по горизонтали, что вызвало у меня проблемы. Верх в порядке, но справа отделяется от границы, когда я использую border-spacing: 10px 0.

Смарт-парни, такие как я, не считают это проблемой, потому что мы можем установить его margin-right отрицательно, добавив его снова в правой части браузера. Ух ты, умная задница!

Однако, я увидел маленькую проклятую полосу прокрутки в нижней части экрана, как плотва под вашей плитой на кухне. Я ненавижу roac .. полосы прокрутки специально горизонтали, поэтому я получил свой inseticide под названием overflow-x и kil .. установил его на hidden. Она бежала отчаянно и без колебаний, но я знаю, что она там, где-то смотрела на меня. И это сводит меня с ума.

Серьезно сейчас. Я думаю, что это неправильный способ сделать это, и я надеюсь, что кто-то сможет научить меня, как это сделать.

This is my scenario on Fiddle

Спасибо заранее (в основном для чтения этого дерьма).

Answer 1

Есть несколько способов достижения того, чего вы пытаетесь достичь. Чаще всего использование display: table, display: table-cell и т. Д. Не очень велико в списке.

Итак, вот как я бы это сделать: http://jsfiddle.net/VKnQZ/1/

ли иметь в виду, что я не знаю, полное обстоятельство, что вы пытаетесь так что вполне может быть, что я пропускаю а (действительный) причина, по которой вы используете свойства отображения таблиц в первую очередь.

Вы заметите кое-что здесь:

• Я покончила с свойствами отображения таблицы. Я не думаю, что они вам нужны, и floats делают работу просто отлично (просто не забудьте очистить их).
• Я удалил display из делений ячейки. Как указывалось выше в комментариях, divs наследует display: bloc k по умолчанию. Дополнительные размеры устанавливают их размер, как вы уже имели его.
• Я использую + selector, чтобы установить расстояние между элементами. В этом случае div + div по существу является короткой рукой для «каждого div, который находится рядом с другим div» - так что все они в стороне от первого.

Надеюсь, это позволит достичь того, к чему вы стремитесь, и устраняет все неприятные переполнения/поля/etc.

Вот код:

HTML (только изменение заключается в удалении строки дел):

<div id="nav"> 
    <div class="red"></div> 
    <div class="green"></div> 
    <div class="blue"></div> 
</div> 

CSS:

body { 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    float: right; 
} 

#nav div { 
    float: left; 
    width: 120px; 
    height: 40px; 
} 

#nav div + div{ 
    margin-left: 10px; 
} 

.red { background-color:#f00 } 
.green { background-color:#0f0 } 
.blue { background-color:#00f } 

Answer 2

и вы можете сказать мне, почему вы пытаетесь имитировать поведение таблицы, когда у вас есть тег «table»? это может быть стилизовано довольно хорошо также

то, что вы делаете, это иногда называют «divitis»

edit: 

вы можете поместить таблицу абсолютно http://jsfiddle.net/n83kT/

Answer 3

Не слишком уверен, что это правильное место, чтобы обсудить поплавок и дисплей :)
Но, flex уже в пути, и дисплей уже работает очень тихо.

Дисплей + направление, и вы можете удалять поплавки.
версия границы разнос: http://jsfiddle.net/GCyrillus/2EZ3F/
границы слева версия: http://jsfiddle.net/GCyrillus/2EZ3F/1/

<section> 
    <div id="nav"> 
     <div class="red"></div> 
     <div class="green"></div> 
     <div class="blue"></div> 
    </div> 
</section> 

раздел, чтобы задать направление .. или нет
незадано направление & сброса фальсифицировать поплавок,
еще использовать text- выровняйте, если вам не нравится этот метод.
В CSSheet, обратите внимание, рядный стол вместо таблицы поэтому она реагирует на выравнивания текста и или направление (не все страницы EN или FR :))

body { 
    padding: 0; 
    margin: 0; 
} 
section { 
    direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */ 
} 
#nav { 
    direction:ltr;/* reset/set here if you want cells from left to right */ 
    display:inline-table; 
    border-spacing: 10px 0 ; 
} 
#nav div { 
    /*direction:ltr; reset here if you want cells from right to left */ 
    display: table-cell; 
    width: 120px; 
    height: 40px; 
} 
#nav div + div { 
    margin-left: 10px; 
} 
.red { 
    background-color:#f00 
} 
.green { 
    background-color:#0f0 
} 
.blue { 
    background-color:#00f 
} 

Мои 2 (конец) центов за другой точка зрения:

Answer 4

Для полноты, я хотел бы предложить корпус для часто пропускаемого вида дисплея inline-block.

Подобно использованию поплавков, то HTML выглядит следующим образом:

<div id="nav"> 
    <div class="red"></div> 
    <div class="green"></div> 
    <div class="blue"></div> 
</div> 

и CSS:

#nav { 
    position:absolute; 
    top:0; 
    right:0; 
} 

#nav div { 
    width: 120px; 
    height: 40px; 
    display: inline-block; 
    vertical-align: bottom; 
} 

#nav div + div { 
    margin-left: 10px; 
} 

Этот inline-block подход ведет себя аналогично подходу перемещаемого ребенку-Div в.

В этом приложении я не могу придумать причину использовать один над другим.

Одно из незначительных соображений состоит в том, что inline-block не поддерживается в некоторых старых браузерах.

В противном случае оба подхода используют одну и ту же наценку, а правила CSS также просты.

Выбор может зависеть от содержания, которое вы используете в элементах #nav div.

Demo скрипку: http://jsfiddle.net/audetwebdesign/EVJPN/