Как выравнивать пролеты или divs по горизонтали?

Ответ 1

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

Ответ 2

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

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

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

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

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

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

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

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

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

Ответ 4

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

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

или

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

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

Ответ 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>

Ответ 6

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

Попробуйте это для starters из Smashing Magazine.

Ответ 7

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

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

Это первый раз, когда я использую этот "инструмент кода" из переполнения... но shoul делает это до сих пор...

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

    <!-- 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 на другие значения... it shoul work... также обратите внимание, что 10%, что arent, используемый div его betwen them... извините за плохой английский:)