两个 多个div不换行


<div style="display:inline;">元素一</div><div style="display:inline;">元素二</div>
//可以搭配overflow:hidden使用

决方方法1:display:inline,将其变成行级元素,这样2个div就会排在同一行。


<div style="width:400px;height:300px;?border-width:1px;border-style:solid;border-color:#FFDEAD;">
		<div style="background-color:#6495ED;width:100px;height:100px;display:inline;"></div>
		<div style="background-color:#C0FF3E;width:100px;height:100px;display:inline;"></div>
		<div style="background-color:#8A2BE2;width:100px;height:100px;display:inline;"></div>
</div>
 
<div style="width:700px;height:500px;?border-width:1px;border-style:solid;border-color:#FFDEAD;">
		<div style="background-color:#6495ED;width:100px;height:100px;float:left;"></div>
		<div style="background-color:#C0FF3E;width:100px;height:100px;float:left;"></div>
		<div style="background-color:#C0FF3E;width:100px;height:100px;float:right;"></div>
		
		<!--必须清除浮动,才能换行-->
		<div style="background-color:#8A2BE2;width:100px;height:100px;clear:both;"></div>
</div>

使用inline,2个div之间默认是有缝隙的,不会刚好贴在一起;使用float,会影响后续的div,必须通过clear清除。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM