Question

when the screen size changes to less than 992px , i want the center div to come first and occupy 100% of the width whereas the left and right column should come right below it and share 45% 45% width on the same line, i want to use this for tablets, but when i try to reposition them, i manage to push the center up first but the right div falls below the left div leaving a large space to the right.
instead of  
                 ....center....
                 .left..right..      i get 
                                                     ....center....
                                                     left..........
                                                     right.........

below is the complete css & html for the divs



<section class="cbs-center-container">
  <div class="column-type-1">                      (left column)
  </div>
  <div class="cbs-content-col">                   (center content)
  </div>
  <div class="column-type-1">                    (right column)
  </div>
</section>



.cbs-center-container                              (container)
{
padding: 30px 30px 13px 30px;
background:#eeeeee;
}

#cbs-content-col,                        (center div)
{
  float: left;
  min-height: 1px;
}
#cbs-content-col {
  width: 50%;
  padding: 5px 10px 60px;           
}
.column-type-0{
  float: left;
}

  .column-type-0{
    width: 25%;
    position: relative;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 5px;
  }


@media only screen and (max-width: 992px) {
  .cbs-center-container {
    display:table;                      (first i display container as table)
  }
  #cbs-content-col{
    display: table-header-group;     (this is the div i want to show first)
    width: 100%
  }
  .column-type-0 {
    width: 45%;
    display: table-footer-group;        (this 2 columns should come second )
    position: relative;
    height: auto;
    padding-right: 5px;
    padding-left: 5px;
  }
}


@media (max-width: 640px){                    (mobile display)
  .column-type-0{ width: 80%;
    position: relative;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 5px;
  margin: auto;
  }
}

请帮助，我如何轻松地定位dom元素，没有flexbox的最好的解决方案，没有社区考虑这个，我刚刚意识到我现在需要它，因为我进入了响应式网页设计，如果我可能会问并非平板电脑屏幕尺寸大约为1000px？

Answer 1

大多数情况下，您不需要使用自定义css进行定位，只需将浮动添加到样式中即可。

div div_name {
    float: left;
    /* remaining code goes here...........*/
}

根据屏幕大小通过css重新定位html元素

1 个答案: