html - float 元素在存在最大宽度时中断到新页面

Question

我正在尝试了解如何使我的布局具有响应性。我有以下代码:

<style>
  .wrapper{width:1000px;}
  .left{float:left; width:100%;max-width:641px;display:inline;}
  .right{float:left;width:359px;display:inline;}
</style>
<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

现在窗口宽度超过 1000px 时就可以了。当我缩小窗口时，div.right 被推到新行而不是给我 div.left 的响应收缩。请指出正确的方向。谢谢!

Answer 1

您听起来好像想要 flex 盒可以轻松解决的问题。 http://codepen.io/tkrugg/pen/pmhrE如果你只支持最近的浏览器，你应该试一试。

  .wrapper{  
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
            flex-direction: row;
    max-width:1000px;
  }
  .left{
    flex-grow:1;
  }
  .right{    
    flex-basis:359px; 
  }