Проблема выравнивания с CSS

Question

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

title1:   20 
title2:   30 

Я хочу титул быть выровнены влево, а число справа. Вот как я сделал http://jsfiddle.net/MmLQL/34/. Как вы можете видеть, у меня разрыв строки между номером и заголовком (который, как мне кажется, исходит от использования h-тега). Но дело даже в том, что я использую тег span, который должен отображать элементы inline и не вызывает разрыв строки, я теряю выравнивание по правому краю/слева. Вот пример: http://jsfiddle.net/MmLQL/35/

Answer 1

Вы должны попробовать этот путь с «поплавком:»:

.container { 
    width: 100%; 
    clear: both; 
} 
.title { 
    float:left ; 
    display: inline; 
} 

.number { 
    float: right; 
} 

<div > 
    <div class="container"> 
     <div class="title">title:</div> 
     <div class="number">number </div> 
    </div> 
    <div class="container"> 
     <div class="title">title:</div> 
     <div class="number">number </div> 
    </div> 
</div> 

Answer 2

Я бы это сделал float param. Как это: http://jsfiddle.net/dan1410/MmLQL/38/

Answer 3

Попробуйте это, http://jsfiddle.net/MmLQL/36/,

HTML

<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 

CSS

h2 {text-align:left} 

h3 { 
    text-align: right; 
    float:right; 
} 

Вы, возможно, придется использовать поплавковый ясно дивы, хотя, это должно помочь, http://www.positioniseverything.net/easyclearing.html,

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

..и изменить divs как class = "clearfix".

Answer 4

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

div { width: 100%; } 
h2 { 
    width: 50%; 
    display: inline-block; 
    float: left; 
} 

h3 { 
    display: inline-block; 
    width: 50%; 
    text-align: right; 
} 

Answer 5

Вы также можете использовать CSS таблицы/ячеек таблицы

<div class="container"> 
    <h2>title: The Title</h2> 
    <h3>number</h3> 
</div> 

CSS:

.container { 
    border: 1px solid gray; 
    display: table; 
    width: 400px; /* set to 100% if full width */ 
} 
h2 { 
    text-align:left; 
    display: table-cell; 
} 
h3 { 
    text-align: right; 
    display: table-cell; 
} 

См демонстрационная http://jsfiddle.net/audetwebdesign/pcZaq/

Этот подход полезен, если вам нужен некоторый контроль над вертикальное выравнивание.

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

Выбор зависит от того, как вы хотите, чтобы макет вел себя в ответном порядке.

Answer 6

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

Дисплей: table-cell фактически существует только в CSS, чтобы дать реальный элемент, и это дети их стилей. Его нельзя использовать, чтобы элементы, отличные от таблицы, велись как элементы таблицы. По крайней мере, имхо.

Поплавок: слева кажется альтернативой ok, если вы ищете только выравнивание элементов.

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