Rumah > hujung hadapan web > html tutorial > CSS让2个DIV在同一行显示的解决方法_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:50:37
asal
1659 orang telah melayarinya

在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>
Salin selepas log masuk


解决方法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>
Salin selepas log masuk

 

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan