基本CSS沸騰我的頭

Question

.long { 
width: 100%; 
} 
.short { 
width: 49.2%; 
} 

我已經定義了上述類，但由於某種原因，當我參考2個短divs他們在單獨的行（不是如預期的並排）。

這是最基本的基本 - 我認爲太陽已經到了我身邊。

Answer 1

這是因爲<div>是塊元素，而不是內聯元素。

試試這個：

.long { 
    width: 100%; 
} 
.short { 
    width: 49.2%; 
    display: inline-block; 
} 

Answer 2

div元素是，默認情況下，display: block，position: static和float: none - 所以他們會換行，在正常流動，不要讓下面的內容冒泡旁邊。

如果你想要它們並排，你需要改變其中之一。

display: inline-block可能是您最好的選擇。

Answer 3

的div是

display: block; 

默認。如果將它們更改爲

display: inline-block; 

它們應該並排顯示。

Answer 4

你必須定義屬性float：

.short { 
    float: left; 
    width: 49.2%; 
} 

例

http://jsfiddle.net/7eS22/

Answer 5

的div是塊元素，因此，除非你添加一個浮子，他們將不會出現彼此相鄰一個或兩個。 （另外，。長班將在div跨越其容器的全部內容將排除任何其他元素旁邊顯示出來吧。）

.long { 
    float: left; 
    width: 100%; 
} 
.short { 
    float: left; 
    width: 49.2%; 
} 

Answer 6

您可以使用display: inline-block;或浮在你的div，如float:left;。

我希望這可以幫助你。

Answer 7

您還需要修改「display」屬性。 div元素的默認值爲block，除非另行指定，否則它不接受任何元素。

顯示：塊意味着該元素顯示爲一個塊，因爲 段落和標題一直是。一個塊在其上面和下面有一些空白 ，並且除了 （例如，通過將浮點聲明添加到另一個 元素）之外，它不允許在其旁邊有HTML元素。 http://quirksmode.org/css/css2/display.html

您可以添加：

.short { width: 49.2%; display: inline-block; } 

或者你可以浮動的第一個：

.short:first-child { float: left; } 

要麼基本上應該得到你想要的東西。對於這兩種技術還有其他值得注意的地方，例如浮動時溢出或者IE7對內聯塊進行攻擊，但至少可以讓你開始。