一个CSS-float布局问题

<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添加样式,达到类似于

clipboard.png

这样的【c在左边填充满a剩下的宽度空间并且不占据b下方的空间

请问可以有哪些方法呢(尽可能多,假设a占据了整个浏览器宽度)?

阅读 5.5k
8 个回答

直接给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...

给黄色一个 margin-right

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏