Як вирівняти прольоти або поділи по горизонталі?

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

<div style='width:30%; text-align:center; float:left; clear:both;'> Це те, що я маю зараз.

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

Можна використовувати

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

Якщо вам потрібна лише підтримка браузерів, які підтримують вбудовані блоки. Вбудовані блоки можуть мати ширину, але є вбудованими, як елементи кнопок.

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

Моя відповідь:

<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, мабуть, є більш доречним, оскільки я припускаю, що ви хочете наповнити ці div div вмістом.

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

Зверніть увагу, використання display:inline. Це стосується помилки подвоєння маржі ie6. За потреби ви можете вирішити цю проблему іншими способами, наприклад, умовні таблиці стилів.

Я додав обгортку (#whatever), оскільки, припускаю, це не будуть єдиними елементами на сторінці, тому майже напевно вам доведеться відокремити їх від інших елементів сторінки.

У будь-якому випадку, я сподіваюся, це корисно.

Ви можете зробити:

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

або

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

Будь-яка з них призведе до того, що divs буде плитати горизонтально.

Я б зробив це приблизно так, оскільки це дає вам 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, між ними ... вибачте за погану англійську :)