Rumah > hujung hadapan web > html tutorial > 怎么让div2 处于 div1 中间_html/css_WEB-ITnose

怎么让div2 处于 div1 中间_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 12:24:46
asal
1266 orang telah melayarinya


怎么让div2 处于 div1 水平中间


回复讨论(解决方案)

可以使用js动态计算2者的宽度 高度然后进行除2,设置div1 的padding

<style>div{margin:0;padding:0}#div1{position:relative;height:200px;width:200px;background-color:red}#div2{position:absolute;height:100px;width:100px;background-color:yellow;top:50%;margin-top:-50px;left:50%;margin-left:-50px}</style><div id="div1">	<div id="div2">	</div></div>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

<style>div{margin:0;padding:0}#div1{position:relative;height:200px;width:200px;background-color:red}#div2{position:absolute;height:100px;width:100px;background-color:yellow;top:50%;margin-top:-50px;left:50%;margin-left:-50px}</style><div id="div1">	<div id="div2">	</div></div>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk


我的div1宽度是随着浏览器跨度延伸的

延伸就延伸呗,你直接把div1的width属性去掉就行了
只要div2的宽度是固定的就行。


<style>div{margin:0;padding:0}#div1{position:relative;height:200px;width:200px;background-color:red}#div2{position:absolute;height:100px;width:100px;background-color:yellow;top:50%;margin-top:-50px;left:50%;margin-left:-50px}</style><div id="div1">	<div id="div2">	</div></div>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk


我的div1宽度是随着浏览器跨度延伸的

1111

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