div浮动定位：左边纵两个，右边一个，怎么解决
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div浮动定位：左边纵两个，右边一个，怎么解决相关的知识，希望对你有一定的参考价值。
图一是我想要的结果，右边是我的结果。。。我的做法：橙红套在一起，再左浮动，剩下灰色盒子右浮动，结果没上去。。太蠢了
另外，.box1既然用了flex，那为什么不用flex来做整体布局呢？这样就不需要浮动了。一直以来都不提倡用浮动定位来进行布局，因为很容易就会出现失控的情况，flex才是未来大势所趋。
下面是用flex来实现的方法：
<style>
body display:flex
.left flex:3 1 auto; display:flex; flex-direction:column; height:200px
.right flex:2 1 auto; height:200px
.top flex:auto
.bottom flex:auto
.y background-color:#f80
.b background-color:#ccc
.r background-color:#f00
</style>
<body>
<div class="left">
<div class="y top"></div>
<div class="r bottom"></div>
</div>
<div class="b right"></div>
</body> 参考技术A 这主要原因是你的整体框架结构不对
橙色和红色应该放置于一个块级元素内，这个块级元素应该与灰色元素是同一级的；
然后对这两个块级元素设置float：left就方便控制的多
如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局
通过绝对定位实现See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.
注意点如下：
需要套一个“positioned”的父元素 div-a 绝对定位，并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-a 的宽度（因为 div-a 绝对定位已经脱离文档流，故不设定为 div-a 宽度的话，会相互覆盖） div-c 绝对定位并将位置调整为正下方 需要自适应的 div 均设定宽度为100% 参考技术A 第一种方法，网上流传比较广的方法。采用左列left浮动，右列不浮动，采用margin-left定位的方式。 #leftwidth:100px;height:100px;background-color:#ccc;border:2px solid #333;float:left;#rightheight:300px;margin-left:104px; border:2p...本回答被提问者采纳
以上是关于div浮动定位：左边纵两个，右边一个，怎么解决的主要内容，如果未能解决你的问题，请参考以下文章
css 两列布局 右边固定 左边可伸缩 但是有最小宽度 如何实现？