为什么span元素中的内容不能放在div容器中？
显示键
可以使用以下CSS代码将p元素中的内容放入div容器中。
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<p>music mane: xxxxxxxx</p>
<p>author: yyyyyyyy</p>
<p>publication：20081001</p>
<p>language：english</p>
</div>
</div>
现在，我用span元素替换了p元素。
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<span>music mane: xxxxxxxx</span>
<span>author: yyyyyyyy</span>
<span>publication：20081001</span>
<span>language：english</span>
</div>
</div>显示的效果如下。 
span中的所有内容都在div容器之外，在p元素中效果不同，如何使div容器中的span元素中的所有内容呢？
燃烧灯
它工作在第一种情况下，而不是第二个原因是因为<p>标签是display: block默认和<span>标签是display: inline默认。块段落元素在其父级中每行显示一个，并且由于其父级是浮动的，因此它们仅占用必要的宽度。
但是，使用内联跨度标签时，它们会并排显示，并占用尽可能多的宽度，从而导致其父对象（描述div）比图像右侧的空间宽。因此，说明div将显示在图像下方。
要解决此问题，可以display: block在span元素上进行设置。喜欢：
div.description span
{
display: block;
}
这是一个工作示例：https : //jsfiddle.net/uy8x9z4v/。但是，由于<p>标签已经具有所需的块显示功能，因此，除非有充分的理由，否则我建议您使用它们而不是跨度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么将 <img> 放在容器中（例如 <div> ）？
- 2
为什么相同的文本内容在<input>中显示的内容与在<div>或<span>标签中显示的内容不同？
- 3
为什么我不能把 mysql 结果放在 $_SESSION 中
- 4
删除 div 中除 span 元素之外的所有内容
- 5
为什么在使用jQuery对容器div中的子元素进行计数时，浏览器为什么冻结？
- 6
为什么onclick不将文本放在div中？
- 7
为什么我不能检查堆栈中的内容？
- 8
为什么不能用C ++擦除文件中的内容？
- 9
为什么不能从元素中删除样式？
- 10
为什么我不能从列表中删除所需的元素
- 11
为什么我不能更改反向列表中的元素？
- 12
容器为什么不能显示主机安装目录的内容？
- 13
容器为什么不能显示主机安装目录的内容？
- 14
为什么React 16中的片段比容器div更好？
- 15
为什么背景图像不显示在 div 容器中？
- 16
将内容放在居中的div中
- 17
将内容放在居中的div中
- 18
为什么我不能将cin / cout放在函数中并从main（）调用该函数
- 19
为什么我不能将属性名称而不是“值”关键字放在setter中？
- 20
为什么我不能将属性名称而不是“值”关键字放在setter中？
- 21
为什么margin不能在div中工作？
- 22
为什么不能在ember中附加到div？
- 23
为什么需要将Python中的future_statements放在所有内容的前面？
- 24
任何具有内部链接的内容都可以放在C ++的头文件中。为什么？
- 25
为什么 div 内容没有在 dash / plotly 中更新？
- 26
当表格不能放在浮动元素旁边时，为什么表格不能清除浮动？
- 27
当表不能放在float元素旁边时，为什么表不能清除float？
- 28
innerHTML不显示<div>中第二个<span>元素的内容
- 29
为什么我不能在div标签中的网站上应用填充，我在其中将类定义为“容器流体”并编写了相同的CSS代码
我来说两句