显示：块显示我所有<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>