极客观点
研发管理
HarmonyOS
<style>
.b {
height: 100px;
width: 100px;
float: right;
border: red那个;
}
.c {
border: yellow那个;
}
</style>
<body class=a>
<div class=b></div>
<div class=c>假设这里有大量文字...</div>
</body>加入有这么一段DOM和CSS，现在需要给a或c或b添加样式，达到类似于
这样的【c在左边填充满a剩下的宽度空间并且不占据b下方的空间】
请问可以有哪些方法呢（尽可能多，假设a占据了整个浏览器宽度）？
可以通过 .c 元素创建 BFC 来实现。因为 div 的默认宽度是 100%，而且 BFC 元素不会与浮动元素重合，所以 .c 元素会占据剩余的空间。例子如下：http://codepen.io/zengkan0703...。
创建 BFC 的方法：
1.根元素本身
2.元素浮动（float属性不为none）
3.元素绝对定位（position属性为absolute或fixed）
4.display属性为inline-block、table-cell或table-caption(表格标题)
5.overflow属性值不为默认的visible
6.弹性盒子（display属性为flex或inline-flex）
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
<link rel="stylesheet" href="css/index.css">
<style>
.wrap{
width: 600px;
height: 200px;
border: 1px solid #000;
/*background-color: red;*/
}
.left{
float: left;
margin-right: -200px;
/*width: 100%;*/
height: 200px;
border: 1px solid blueviolet;
}
.right{
float: right;
width: 200px;
height: 200px;
border: 1px solid greenyellow;
}
</style></head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div></div>
</body>
</html>
<style>
.a{
position: relative
}
.b{
position: absolute;
top: 0;
rigth: 0;
width: 200px;
height: 200px;
border: 1px solid red;
}
.c{
width: 100%;
margin-right: 200px;
border: 1px solid yellow;
}</style>
可以看下圣杯布局
双飞翼布局
弹性布局
3 回答1.7k 阅读✓ 已解决
3 回答987 阅读✓ 已解决
3 回答1.1k 阅读✓ 已解决
2 回答963 阅读✓ 已解决
1 回答1.4k 阅读✓ 已解决
2 回答848 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
直接给C一个margin-right就可以了。
<style>
</style>
如果要尽可能多的解决方式，你这个问题其实就是一个两列右边固定宽度，左边自适应的问题。布局方式有浮动定位法，绝对定位法，margin负值法等，可以参考下我前段时间总结的三端布局，中间自适应的文章，应该会给你一些帮助：https://segmentfault.com/a/11...