Question

我有2个div，左边一个是流体，有宽高比，右边有一个固定宽度。我希望低于600px的右侧div落在左侧div（并且变为100％宽度），而左侧div必须保持宽高比，因为窗口缩小。包装div必须明显具有两个子div的高度。是否可以用css做到这一点？

<div class="wrapper">
  <div class="a">
    This is your div with the specified aspect ratio.
  </div>
  <div class="b"></div>
</div>

Fiddle

Answer 1

您可以使用flex-box来实现此目的。

.wrapper{
  display: flex;
}

.wrapper .a{
  flex-grow: 1;
  // Presentational styles
  background: deepskyblue url('https://res.cloudinary.com/sivadass/image/upload/v1493620046/dummy-products/cauliflower.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.wrapper .b{
  flex-basis: 400px;
  background: #333;
  flex-shrink: 0;
}
@media (max-width: 600px){
  .wrapper{
    display: block;
  }
}

查看演示here

响应大小与宽高比和查询

1 个答案: