Question

我想要做的是有两个列：左侧有一个主列，右侧有一个列，其中有2个项目。问题是，所有三个物品的高度以及因此整个容器的高度变化很大，这阻止了布局的包装。

我无法将正确的项目放入一个div中，因为我需要将其中一个项目移动到移动设备的顶部（通过订单）。

基本上，我想要实现下面的结果，而不必将容器设置为固定高度。

＆＃13;

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 800px;
}

.child--main {
  height: 800px;
  width: calc(200% / 3);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #6b6bef;
  line-height: 800px;
  flex-basis: 100%;
}

.child--video {
  height: 300px;
  width: calc(100% / 3);
  background-color: #f1b36a;
  color: white;
  text-align: center;
  line-height: 300px;
  text-transform: uppercase;
}

.child--sidebar {
  height: 400px;
  width: calc(100% / 3);
  text-align: center;
  line-height: 400px;
  color: #fff;
  background-color: #81ca3a;
  text-transform: uppercase;
}

＆＃13;

<div class="flex">
  <div class="child child--main">main</div>
  <div class="child child--video">video</div>
  <div class="child child--sidebar">sidebar</div>
</div>

＆＃13;

Answer 1

这是flexbox的替代品。

希望这对你有帮助。

$(document).ready(function() {
  setInterval(function(){
    if (parseInt($('.child--main').css('height'), 10) == 1000) {
      $('.child--main').animate({'height': '100px'}, 1000);
    } else {
      $('.child--main').animate({'height': '1000px'}, 1000);
    }
    
  }, 2000);
});

.flex {
  /*display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 800px;*/
}

.child--main {
  float:left;
  height: 800px;
  width: calc(200% / 3);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #6b6bef;
  line-height: 800px;
  flex-basis: 100%;
}

.child--video {
  float:right;
  height: 300px;
  width: calc(100% / 3);
  background-color: #f1b36a;
  color: white;
  text-align: center;
  line-height: 300px;
  text-transform: uppercase;
}

.child--sidebar {
  float:right;
  clear:right; /* this for a small height body  */
  height: 400px;
  width: calc(100% / 3);
  text-align: center;
  line-height: 400px;
  color: #fff;
  background-color: #81ca3a;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="child child--main">main</div>
  <div class="child child--video">video</div>
  <div class="child child--sidebar">sidebar</div>
</div>

CSS Flexbox Layout包含两个动态列和三个项目

1 个答案: