div浮动定位:左边纵两个,右边一个,怎么解决
发布网友
发布时间:2022-05-11 06:35
我来回答
共2个回答
热心网友
时间:2023-10-03 08:05
左浮动应该放在包含橙红的那个div,而不是橙红这两个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>
热心网友
时间:2023-10-03 08:06
这主要原因是你的整体框架结构不对
橙色和红色应该放置于一个块级元素内,这个块级元素应该与灰色元素是同一级的;
然后对这两个块级元素设置float:left就方便控制的多