html - 显示 : block showing all my <span>s inline

Question

我只是在学习 CSS，所以这可能是我搞砸的 super 基础知识。我有一个包含 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>

图像和后续 span 都以内联方式显示。目前其他div中没有​​内容。

感谢您的帮助。

Answer 1

<span>默认情况下是内联的。

如果你想要 block ，你应该使用 divs。但是如果你想强制 html 中的 span 成为 block (你不应该 - 你应该将它们更改为 div)，只需这样做:

#c span { display: block; }