0

私の問題は非常に単純ですが、その方法がわかりませんでした。私は div を持っており、その中にいくつかの情報を表示しています。基本的に、次のようなものです：

title1:         20
title2:         30

タイトルを左に、番号を右に揃えたい。これがhttp://jsfiddle.net/MmLQL/34/のやり方です。ご覧のとおり、番号とタイトルの間に改行があります (これは h タグの使用によるものだと思います)。しかし、要素をインラインで表示し、改行を強制しないスパンタグを使用しても、右/左のテキスト整列オプションが失われます。ここに例があります：http://jsfiddle.net/MmLQL/35/

4

6 に答える 6

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>
于 2013-09-25T15:02:43.933 に答える
0

これを試してください、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;
}

ただし、div で float-clear を使用する必要がある場合がありますが、これが役立つはずです。

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

..div を class="clearfix" に変更します。

于 2013-09-25T15:02:10.840 に答える