1

同じ行に2行のテキストを表示し、1行を左側に、もう1行を右側に配置しようとしています。

CSS：

.topbar {
    background-image:url(images/bar_bg.png);
    height:62px;
}

.topbar span{
    font-family:Arial;
    font-weight:bold;
    font-size:15px;
    color:#494963;
    margin: 0;
    padding-left:280px;
    padding-top:15px;
}

.topbar span.left{
    font-family:Arial;
    font-size:15px;
    color:#494963;
    margin: 0;
    padding-right:380px;
    padding-top:15px;
}

HTML：

<div class="topbar">
    <span class="left">Contact Us or Come see us at our Branch</span>
    <span>11 HIGH  STREET, TOWN CENTER, Bristol, BA140IO </span>
</div>
4

3 に答える 3

2

あなたのfloat属性を使用してください！：]

span { 
 float: right;
}

span.left {
 float: left;
}

（必要に応じてクリアすることを忘れないでください！）

于 2012-07-23T20:23:41.707 に答える
2

スパンcssを次のように設定する必要がある場合があります。

display: inline-block !important;

スパンが親divからブロック表示を継承する問題、または含まれているcssファイルがスパン表示タイプのデフォルトを変更した同様の問題がありました。

インラインブロックに設定すると、フロートを使用せずにスパンが期待どおりに表示されます。個人的には、可能な限りフロートを避けようとしています。

レイアウトがどのように機能するかを示す良い例を次に示します 。divとspan：display ='block'、'inline'、または'inline-block'？

于 2012-07-23T20:30:42.857 に答える
1

確かに非常に単純です。floatCSS属性を利用する必要があります。

http://jsfiddle.net/4cTFP/

于 2012-07-23T20:25:02.330 に答える