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

Question

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

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

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

389 10

html css

10 ответов:

Comments

Ничего не найдено.

jmcd · Accepted Answer · 2008-10-22 17:28:22

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

runeh · Accepted Answer · 2008-10-22 18:13:40

можно использовать
.floatybox {
     display: inline-block;
     width: 123px;
}
Если вам нужно только поддерживать браузеры, которые поддерживают встроенные блоки. Встроенные блоки могут иметь ширину, но являются встроенными, как элементы кнопки.

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

Sam Murray-Sutton · Accepted Answer · 2012-08-23 16:14:25

мой ответ:
<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 установить на ДИВС. Установка его таким образом будет означать, что браузер не позволит каким-либо элементам сидеть одной линии с ними. В результате, ваши элементы будут складываться.

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

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

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

Jeremy B. · Accepted Answer · 2008-10-22 17:35:02

вы можете сделать:
<div style="float: left;"></div>
или
<div style="display: inline;"></div>
либо один вызовет ДИВС плитки по горизонтали.

monkey do · Accepted Answer · 2016-06-02 16:36:12

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

marcus.greasly · Accepted Answer · 2008-10-22 17:34:55

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

на начала из журнала Smashing.

Eros Neto Talevi · Accepted Answer · 2017-10-26 16:00:23

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

Nick · Accepted Answer · 2008-10-22 17:28:32

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

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

d1rk · Accepted Answer · 2016-06-02 17:49:06

Я бы постарался дать им все и с помощью float: left;.

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

Eros Neto Talevi · Accepted Answer · 2017-10-26 16:11:16

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


<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
другое... попробуйте использовать float: left; или right; изменить width для других значений... это должно сработать... также обратите внимание, что 10%, которые не используются div его между ними... извините за плохой английский :)