CSS元素定位

Question

我試圖把兩個div放在同一個「級別」，例如： ------ ---------- | Eelem 1 | | Elem 2 | -------- ---------- 但到目前爲止elem1在elem2以上。 我已經添加了相關的代碼，我能做些什麼來解決它？

在此先感謝ç

<div class="stats">The expression <b>football</b> appeared 47 times in 44 different status messages</div><div class='hideDiv'><p class='toggleStats'>Hide Stats</p></div>run time is9.6276791095734 
      <div class="dropStatus"> 
       <p class="dropHeader">Drag , Drop & Share !</p> 
       <p class="droppedStatus"><button class="clear" style="display:none">clear</button></p> 
      </div> 



.stats{ 
    margin-left : 20px; 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius : 12px; 
    font-size: 15px; 
    text-align: center; 
} 


.dropStatus { 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius: 12px; 
} 

.dropHeader{ 
    font-size : 25px; 
    text-align: left; 
} 

.droppedStatus{ 
    font-size : 15px; 
    text-align: left; 
} 

Answer 1

最可靠的方法來做到這一點是設置display到inline或inline-block。如果需要，請使用vertical-align。

Answer 2

你有2種選擇：

.stats{ 
    margin-left : 20px; 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius : 12px; 
    font-size: 15px; 
    text-align: center; 
    display: inline; /* You can also use inline-block but might be problematic with ie*/ 
} 


.dropStatus { 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius: 12px; 
    display: inline; /* You can also use inline-block but might be problematic with ie*/ 
} 

或者：

.stats{ 
    margin-left : 20px; 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius : 12px; 
    font-size: 15px; 
    text-align: center; 
    float: left; /* added this */ 
} 


.dropStatus { 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius: 12px; 
    float: left; /* added this*/ 
} 

請注意，彩車可能是一個有點棘手，你可以學到更多here

Answer 3

希望這有助於:)

http://jsfiddle.net/uLPT5/

Answer 4

您的問題在於div元素被稱爲block elements，這意味着您將不得不應用CSS規則來防止其默認行爲，而是使其行爲類似於inline或inline-block元素。

通過將樣式規則display:inline-block;應用於這些塊元素，它們將開始像塊一樣行動 - 但內聯！ （這在很多情況下非常有用）。

值得注意的是，您可能需要將vertical-align:top添加到這些元素以便它們正確對齊。

此外，inline-block倒不在早期版本Internet Explorer支持（例如6,7），來解決這個問題，你還可以添加規則*display:inline; zoom:1;，這將使按預期在大多數情況下塊行事。

我給你下面這個實現的例子。

.stats{ 
    margin-left : 20px; 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius : 12px; 
    font-size: 15px; 
    text-align: center; 
    display:inline-block; 
    *display:inline; 
    zoom:1; 
    vertical-align:top; 
} 


.dropStatus { 
    width : 400px; 
    height : 112px; 
    background-color : #C1F756; 
    border-radius: 12px; 
    display:inline-block; 
    *display:inline; 
    zoom:1; 
    vertical-align:top; 
}