一个CSS-float布局问题

发布于 2022-09-04 15:51:08 字数 624 浏览 46 评论 0

<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占据了整个浏览器宽度）？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽清梦 2022-09-11 15:51:08

直接给C一个margin-right就可以了。
<style>

.b {
    height: 100px;
    width: 100px;
    float: right;
    border:1px solid red;
}
.c {
    margin-right: 100px;/*撑开右边距即可*/
    width: auto;
    border: 1px solid yellow;
}

</style>

如果要尽可能多的解决方式，你这个问题其实就是一个两列右边固定宽度，左边自适应的问题。布局方式有浮动定位法，绝对定位法，margin负值法等，可以参考下我前段时间总结的三端布局，中间自适应的文章，应该会给你一些帮助：https://segmentfault.com/a/11...

回复收藏 0

无名指的心愿 2022-09-11 15:51:08

给黄色一个 margin-right

回复收藏 0

帅气尐潴 2022-09-11 15:51:08

可以通过 .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）

回复收藏 0

你的背包 2022-09-11 15:51:08

请参考我写的这篇文章：
css实现左侧宽度自适应，右侧固定宽度，请耐心看完，对你绝对有帮助！

回复收藏 0

煮酒 2022-09-11 15:51:08

建议flex布局阮一峰flex布局

回复收藏 0

若沐 2022-09-11 15:51:08

c一个margin-top不能解决吗？

回复收藏 0

羞稚 2022-09-11 15:51:08

<!DOCTYPE html>

<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>

回复收藏 0

三岁铭 2022-09-11 15:51:08

<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>

可以看下圣杯布局
双飞翼布局
弹性布局

回复收藏 0

~没有更多了~