顯示：塊顯示我所有<span>的內聯</span>

Question

我只是在學習CSS，所以這可能是我正在搞砸的超級基礎知識。 我有一個頁面，其中包含2個標頭div，一個主要內容div和一個頁腳div。 我在主要內容div中只有一張圖像和幾行文字，我希望它們垂直顯示。 我將文本拆分成我想要的范圍，並在div的CSS中顯示了：block。 我以為這將垂直顯示所有內容，但仍將所有內容顯示為一行。

感謝您提供的任何幫助。

 #a { border: 2px solid #000000; float: left; margin: 10px 0px; width: 30%; } #b { border: 2px solid #000000; float: right; margin: 10px 0px; width: 60%; } #c { border: 2px solid #000000; margin: 10px 0; padding: 50px; display: block; text-align: center; } #d { border: 2px solid #000000; margin: 10px 0; padding: 50px; } #e { border:2px solid #000000; margin: 10px 0; width: 100%; overflow: hidden; } img { width: 150px; height: 150px } 

有關此HTML

 <div id="c"> <span><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></span> <span>There and Back</span> <span>My journey</span> </div> 

圖像和隨后的跨度全部內聯顯示。 當前其他div中沒有​​內容。

謝謝您的幫助。

Answer 1

默認情況下， <span>是內聯的。

如果要使用塊，則應使用div 。 但是，如果您想強制html中的跨度為塊（您不應該-應該將它們更改為div），只需執行以下操作：

#c span { display: block; }

Answer 2

最簡單的方法是刪除<span>標簽，將其替換為<div> span標簽變得多余，我不再使用它，因為DIV在所有情況下的表現都更好。 Span不喜歡被程式化。

保持CSS不變。 您的新HTML：

 <div id="c"> <div><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></div> <div>There and Back</div> <div>My journey</div> </div>