[疑问]Inline元素的问题

最新推荐文章于 2022-02-20 10:35:30 发布

最新推荐文章于 2022-02-20 10:35:30 发布 · 130 阅读

文章标签：

#Chrome #HTML

CSS 专栏收录该内容

35 篇文章

订阅专栏

本文探讨了使用特定CSS样式布局在Firefox与Chrome浏览器下呈现的不同效果，重点分析了文本被分为三列显示的原因及元素间如何排列的问题。


.container{
	width:350px;
	background-color:#ccc;
}

span.box { 
		display:inline;
		visibility:visible;
		line-height:100px;
		margin:0 100px;
		padding:20px 120px;
		border-top: 5px solid gray;
		border-bottom:5px solid black;
		border-left: 5px solid gray;
		border-right: 5px solid black;
		background-color:gold;
}


<div class="container">
<span>BEFORE</span>
<span class="box">这是中文这是中文这是中文这是中文这是中文</span>
<span>AFTER</span>
</div>

该代码在FF下跟 CHROME下的显示有差别。但问题是：
1. 为什么会被分成是3列显示，每一列里面的文字的个数，是怎么计算出来的？
2. 该inline元素与它前后的元素之间，是怎么安排的？

FF下的显示结果：

[img]http://dl.iteye.com/upload/attachment/297519/13bdb4c3-28c4-3ee3-83d5-7ae04c8dad30.bmp[/img]

chrome下的显示结果：

[img]http://dl.iteye.com/upload/attachment/297521/7ccb61b9-9ed2-38ff-b3fe-84191c9b3367.bmp[/img]