爲什麼在css中按照預期並排排列元素

<html> 
<head> 
    <style> 
     div#one{ 
      display: inline-block; 
      border: 1px solid green; 
      width: 200px; 
      height: 200px; 
     } 
     p { 
      border: 1px solid black; 

     } 
     div { 
      display: inline-block; 
      border: 1px solid green; 
      width: 200px; 
      height: 200px; 
     } 
    </style> 
</head> 
<body> 
    <div id="one"> 
     <p>Something here</p> 
    </div> 
    <div></div> 
</body> 
</html>

這是我的代碼，我期望divs並排排列，但它們不是。爲什麼？爲什麼在css中按照預期並排排列元素

來源

2012-12-26 dramasea

刪除'顯示：內聯block'和使用'浮動：left'如果你需要並排側.. –

也許這將幫助你：HTTP：/ /stackoverflow.com/questions/1371307/displayblock-inside-displayinline。 – 2012-12-26 09:13:22

添加

vertical-align:top

到div。

JSFiddle demo

來源

2012-12-26 09:06:14 Passerby

你能解釋它爲什麼不起作用嗎？ – dramasea

@dramasea因爲默認'inline'元素具有'vertical-align：text-bottom'。第一個'div'有一行文本，所以文本底部被考慮;第二個'div'是空的，所以它的底部被考慮。 – Passerby

你不應該在這種情況下，使用inline-block的。這可能會導致舊瀏覽器（IE;）出現錯誤。改爲使用「float」。 http://jsfiddle.net/Tymek/HM835/

div { 
    display: block; /* this */ 
    float: left; /* and this */ 
    border: 1px solid #0F0; 
    width: 200px; 
    height: 200px; 
} 

#one { 
    border-color: #F00; 
    width: 200px; 
    height: 200px; 
} 

p { 
    border: 1px solid #000; 
}

<div id="one"> 
    <p>Something here</p> 
</div> 
<div> 
    Lorem ipsum 
</div>

來源

2012-12-26 09:10:37 Tymek

爲什麼在css中按照預期並排排列元素

回答

相關問題