CSS不顯示嵌入式

-2

我喜歡我的代碼顯示的方式是CSS不顯示嵌入式

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>

來源

2013-02-04 Nate Pet

你有沒有考慮使用一個表？ –

最簡單的方法是添加一個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" property指定在其兩側其他浮動元素是不允許的。

我也注意到你已經在一個div中包裝了每一行。在這種情況下，您可以在清理浮動的「包裝器」div上添加一個新類。

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

來源

2013-02-04 19:20:33 MikeSmithDev

吉姆在錯誤的地方，但它是在它應該是。 –

所有這些工作，現在只是接受這個答案 –

@MikeSmithDev - +1。好多了:) –

-1

把<br>在HTML名1之後，但NAME2在這之前應該做你想要什麼，或者嘗試<p></p

來源

2013-02-04 19:19:36