Question

我需要在移动设备上显示时，我的响应式页面会强制在屏幕元素之间获取全屏元素吗？on desktop on mobile。

我有3个（div）元素，在行div中拖曳，在其他div上拖曳一个。在移动设备上显示时，我需要做些什么来强制蓝色元素在橙色和黄色div之间？

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">
     <div class="row orange"></div>
    <div class="row yellow"></div>
  </div>
  <div class="col-xs-12 col-md-8">
    <div class="row blue"></div>
  </div>
</div>

Answer 1

<div class="container">
   <div class="row">
     <div class="col-xs-12 col-md-4">
       <div class="orange"></div>
     </div>
     <div class="col-xs-12 col-md-8">
       <div class="yellow"></div>
     </div>
     <div class="col-xs-12 col-md-4">
       <div class="blue"></div>
     </div>
   </div>
</div>

css:
.container{
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.orange {
  float:left;
  background: orange;
  padding: 20px 30px;
}
@media (min-width: 992px){
  .yellow {
     float:left;
     padding: 20px 30px;
     background: yellow;
     height: 400px;
   }
}/*not always necessary*/
@media (max-width: 992px){
  .yellow {
     float:left;
     padding: 20px 30px;
     background: yellow;
   }
}
 @media (min-width: 992px){
  .blue {
    float:left;
    padding: 20px 30px;
    background: blue;
    position: absolute;
    bottom: 0;
    left: 0px;
   }
  }

强迫一个元素在两个兄弟元素之间进行

1 个答案: