兩個 多個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