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

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

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

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

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

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

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

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

Мой ответ:

<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 значение block. Однако в этом контексте, вероятно, более уместен div, поскольку я предполагаю, что вы хотите заполнить эти div содержимым.

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

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

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

В любом случае, я надеюсь, что это поможет.

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

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

или

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

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

Я бы сделал что-то вроде этого, так как это дает вам 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>

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

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

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

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

Попробуйте это для начала из журнала Smashing Magazine.

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

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

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

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

    <!-- 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, его между ними ... извините за плохой английский :)