Question

我只是在学习CSS，所以这可能是一些超级基本的东西，我只是搞砸了。我有一个页面有2个标题div一个主要内容div和一个页脚div。我只是在主内容div中有一个图像和几行文本，我希望它们垂直显示。我将文本分解为我想要的跨度并显示：在CSS中为div阻止。我认为这会垂直显示所有内容，但它仍然显示在一行中。

感谢您提供的任何帮助。

＆＃13;

#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
}

＆＃13;

与此HTML相关

＆＃13;

<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>

＆＃13;

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

感谢您的帮助。

Answer 1

默认情况下，

<span>是内联的。

如果你想要块，你应该使用 divs 。但是如果你想强制你的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>

显示：阻止显示我的所有<span>内嵌</span>

2 个答案: