将此与CSS保持一致

Question

我的问题很简单，但我想不出怎么做。我有一个div，在里面我会显示一些信息。基本上，就像这样：

title1:         20
title2:         30

我希望标题与左边对齐，数字与右边对齐。这是我做http://jsfiddle.net/MmLQL/34/的方法。正如您所看到的，我在数字和标题之间有一个行间隔(我相信它来自于h标记的使用)。但是问题是，即使我使用一个span标记，它应该以内联方式显示元素，并且不强制断线，我也会丢失文本-对齐(右/左)选项。下面是一个例子：http://jsfiddle.net/MmLQL/35/

Answer 1

您应该用“float：”来尝试这种方法：

.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/，

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

不过，您可能必须在div上使用浮点清除，这会有帮助的，http://www.positioniseverything.net/easyclearing.html，

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

..and将div修改为class=“清除”。