不用float实现并排三个div正方形自适应并排代码

拼多多免单

不是绝对精确,但是可以做到任意屏幕尺寸都是近似正方形,近似三等分。 HTML代码部分: <div cla…

不是绝对精确,但是可以做到任意屏幕尺寸都是近似正方形,近似三等分。


HTML代码部分:

<div class="mydiv_all">
  <div class="mydiv_left">
  </div>
  <div class="mydiv_right">
    <div id="mdr_left">
    </div>
    <div id="mdr_right">
      <div id="mdrr_left"></div>
      <div id="mdrr_right"></div>
    </div>
  </div>
</div>

CSS代码部分:

.mydiv_all{width:100%;margin:0 auto;background:#FF69B4}
.mydiv_left{position:absolute}
.mydiv_right{background:#FFC0CB;margin-left:33.3%}
#mdr_left{position:absolute}
#mdr_right{background:green;margin-left:50%}       
#mdrr_left{position:absolute}
#mdrr_right{background:yellow;margin-left:99.9%;padding:99.9% 0 0}       

最终实现效果:

广告位

发表评论

邮箱地址不会被公开。 必填项已用*标注