当最大宽度出现时，浮动元素中断到新页。
当最大宽度出现时，浮动元素中断到新页。
提问于 2014-04-25 07:54:38
我在试着了解如何使我的布局响应。我有以下代码：
<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>现在，当窗口宽度超过1000 is时，就可以了。当我缩小窗口时，div.right被推入新行，而不是给我div.left的响应收缩。请给我指出正确的方向。谢谢！
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-04-25 08:43:35
你听起来好像想要些能轻易解决的东西。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;
}Stack Overflow用户
发布于 2014-04-25 08:07:33
将此样式添加到html中。这会很好的。
演示
.wrapper{
display:table;
max-width:1000px;
width:100%;
}
.left{
display:table-cell;
max-width:641px;
}
.right{
display:table-cell;
width:349px;
}Stack Overflow用户
发布于 2014-04-25 08:27:59
那是因为你做错了。您应该做的是使用display: table; CSS属性。流体网格就是这样工作的。所以你的代码变成如下：
<style>
.wrapper { max-width: 1000px; margin: 0 auto; }
.row { display: table; width: 100%; height: auto; }
.left { /* 641px / 1000px = 0.641 * 100 = 64.1% */
width: 64.1%; display: table-cell; vertical-align: top; }
.right { /* 359px / 1000px = 0.359 * 100 = 35.9% */
width: 35.9%; display: table-cell; vertical-align: top; }
</style>
<div class="wrapper">
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
</div>您必须为移动设备创建一个断点，只需设置display: block;和width: 100%;，就可以将div放在另一个上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23287305
复制相关文章
相似问题
腾讯云开发者
