[英]Display: block showing all my <span>s inline
I am just learning CSS so this is probably something super basic that I am just messing up. 我只是在学习CSS,所以这可能是我正在搞砸的超级基础知识。 I have a page with 2 header divs one main content div and a footer div. 我有一个页面,其中包含2个标头div,一个主要内容div和一个页脚div。 I just have an image and a couple of lines of text in the main content div and I want them to display vertically. 我在主要内容div中只有一张图像和几行文字,我希望它们垂直显示。 I have the text broken up like I want with spans and have display:block in the CSS for the div. 我将文本拆分成我想要的范围,并在div的CSS中显示了:block。 I thought this would display everything vertically but it is still displaying all in one line. 我以为这将垂直显示所有内容,但仍将所有内容显示为一行。
I appreciate any help you can provide. 感谢您提供的任何帮助。
#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 }
Relating to this HTML 有关此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>
The image and following spans are all being displayed inline. 图像和随后的跨度全部内联显示。 There is currently no content in the other divs. 当前其他div中没有内容。
Thank you for your help. 谢谢您的帮助。
<span>
's by default are inline. 默认情况下, <span>
是内联的。
You should be using divs if you want blocks. 如果要使用块,则应使用div 。 But if you want to force the span's in your html to be blocks (you shouldn't - you should change them to divs), just do this: 但是,如果您想强制html中的跨度为块(您不应该-应该将它们更改为div),只需执行以下操作:
#c span { display: block; }
The easiest way to do this is remove the <span>
tags, replacing them with <div>
The span tag is becoming redundant, I never use it any more as a DIV behave much better in all situations. 最简单的方法是删除<span>
标签,将其替换为<div>
span标签变得多余,我不再使用它,因为DIV在所有情况下的表现都更好。 Span doesn't like to be stylised. Span不喜欢被程式化。
Keep your CSS the same. 保持CSS不变。 Your new HTML: 您的新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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.