Как я выровняю промежутки или деления по горизонтали?

Question

Моя единственная проблема состоит в том, чтобы заставить их выстроиться в три ряда и иметь одинаковый интервал. Видимо, пролеты не могут иметь ширину, а div (и пролеты с display: block) не появляются горизонтально рядом друг с другом. Предложения?

<div style='width:30%; text-align:center; float:left; clear:both;'> Это то, что у меня есть сейчас.

Answer 1

Вы можете использовать div с атрибутом float: left;, который заставит их появляться горизонтально рядом друг с другом, но тогда вам может понадобиться очистить следующие элементы, чтобы убедиться, что они не перекрываются.

Answer 2

Вы можете использовать

.floatybox {
     display: inline-block;
     width: 123px;
}

Если вам нужно только поддерживать браузеры, которые поддерживают встроенные блоки. Встроенные блоки могут иметь ширину, но являются встроенными, как элементы кнопок.

Да, и вы можете добавить вертикальное выравнивание: верх на элементах, чтобы убедиться, что все выстроено в ряд

Answer 3

Мой ответ:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Почему?

Технически, Span - это встроенный элемент, однако он может иметь ширину, вам просто нужно установить свойство display для блокировки в первую очередь. Однако, в этом контексте, div, вероятно, более уместен, так как я предполагаю, что вы хотите заполнить эти div содержимым.

Одна вещь, которую вы определенно не хотите делать, это установить clear:both в div. Установка этого значения будет означать, что браузер не будет позволять никаким элементам располагаться на одной линии с ними. В результате ваши элементы будут складываться.

Обратите внимание, использование display:inline. Это связано с ошибкой удвоения запаса в ie6. При необходимости вы можете решить эту проблему другими способами, например, условными таблицами стилей.

Я добавил оболочку (#whither), так как я предполагаю, что они не будут единственными элементами на странице, поэтому вам почти наверняка придется отделить их от других элементов страницы.

Во всяком случае, я надеюсь, что это полезно.

Answer 4

вы можете сделать:

<div style="float: left;"></div>

или

<div style="display: inline;"></div>

Любой из них приведет к горизонтальному расположению элементов div.

Answer 5

Я бы сделал это примерно так, так как он дает вам 3 столбца четного размера, четный интервал и (даже) шкалы. Примечание: Это не проверено, поэтому может потребоваться настройка для старых браузеров.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

Answer 6

Я бы использовал:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

Это первый раз, когда я использую этот «инструмент кода» из-за переполнения ... но сейчас сделаю это ...

Answer 7

Что вы можете сделать, это поиск макетов на основе CSS-сетки. Этот метод макета включает в себя указание некоторых классов CSS для выравнивания содержимого страницы в виде сетки. Он более тесно связан с макетом на основе печати, чем с веб-интерфейсом, но этот метод используется на многих веб-сайтах для размещения контента в структуре без необходимости прибегать к таблицам.

Попробуйте это для закусок от Smashing Magazine.

Answer 8

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

другой ... попробуйте использовать float: left; или right;, измените width на другие значения ... это сработает ... также обратите внимание, что 10%, которые не используются div, между ними ... извините за плохой английский :)

Answer 9

Я бы попытался присвоить им атрибут display: block; и использовать float: left;.

Затем вы можете установить width и / или height, как вам нравится. Вы даже можете указать некоторые правила вертикального выравнивания.

Answer 10

Посмотрите на свойство css Float. http://w3schools.com/css/pr_class_float.asp

Работает с блочными элементами, такими как div. Кроме того, то, что вы пытаетесь отобразить, таблицы не являются злом, если вы действительно пытаетесь показать таблицу с некоторой информацией.