你的位置:首页 > 软件开发 > 网页设计 > 如何实现三个div都自适应(滴滴面试题)

如何实现三个div都自适应(滴滴面试题)

发布时间:2017-08-30 11:00:14
<div class="table">  <div class="accordant">    <div class="box">   <p>这是一个box</p& ...
<div class="table">  <div class="accordant">    <div class="box">    <p>这是一个box</p>  </div>  <div class="box">   <p>这是一个box</p>  </div>  <div class="box">   <p>这是一个box</p>  </div> </div> </div>
  html{  font-size:10px; } body{  font-size:1.4rem } .box{  background:yellow;margin:0 1rem;width:33.33%;padding:1rem; } .box:nth-child(2){  height:5rem;background:yellowgreen; } .accordant{  display:table-row; } .table .accordant{  display:table-row; } .table .accordant .box{  display:table-cell;vertical-align:middle;text-align:center; }

最终效果图:

如何实现三个div都自适应(滴滴面试题)如何实现三个div都自适应(滴滴面试题)

 

原标题:如何实现三个div都自适应(滴滴面试题)

关键词:div

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。