Heim > Web-Frontend > HTML-Tutorial > CSS让2个DIV在同一行显示的解决方法_html/css_WEB-ITnose

CSS让2个DIV在同一行显示的解决方法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:50:37
Original
1659 Leute haben es durchsucht

在CSS中,div属于块级元素,每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。所以默认情况下,2个div是无法显示在同一行的,必须通过样式属性去修改。

 

解决方方法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>
Nach dem Login kopieren


解决方法2:使用float

<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>
Nach dem Login kopieren

 

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage