-2

コードを表示する方法は次のとおりです。

Name1      
Name2 Jim

現在の方法は次のとおりです。

Name1 Name2  Jim

希望どおりに表示されるように変更するにはどうすればよいですか？

CSS

.display-left {
     float: left; 
     width: 200px; 
     text-align: left; 
     font-weight:bold   
}

.display-right {
     text-align: left;
}

HTML

<div class="display-left">Name1:   </div>
  <div class="display-right" > </div>
</div>
<div>
  <div class="display-left">Name2: </div>
  <div class="display-right">Jim </div>
</div>
4

4 に答える 4

1

clear:left;最も簡単な方法は、.display-leftクラスにを追加することです。そして、float:left;あなたのディスプレイに-正しいクラス

http://jsfiddle.net/f5cUx/3/

.display-left {
    float: left;
    width: 200px;
    text-align: left;
    font-weight:bold;
    clear:left;
}

.display-right {
    text-align: left;
    float:left; 
}

「clear」プロパティは、他のフローティング要素が許可されない側を指定します。

また、各「行」をdivでラップしていることに気づきました。その場合、フロートをクリアする「ラッパー」divに新しいクラスを配置するだけで済みます。

http://jsfiddle.net/f5cUx/4/

于 2013-02-04T19:20:33.347 に答える
0

追加した場合：display：block; .display-leftクラスに対しては、おそらく機能します。試着する！

于 2013-02-04T19:24:51.840 に答える
0

に追加display:blockし.display-right;ます。これにより、HTMLに「行全体を取り上げてください」と表示されます。タグを使用することもできます<br>が、これは1つの例にのみ適しています。その後はコードの無駄です

clear:both;これに追加してみることもできますdisplay-right 。これは、「フロートから抜け出し、常にフロートの下にとどまる」とHTMLに指示します。

于 2013-02-04T19:24:53.180 に答える
-1

name1の後、name2の前にHTMLにaを入れて<br>ください。これは、あなたが望むことをするか、試すべきです。<p></p

于 2013-02-04T19:19:36.857 に答える