问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一个CSS-float布局问题

头像
你看上去很美味得样子
    49232333
    <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占据了整个浏览器宽度）？

    布局css
    阅读 5.4k
    8 个回答
    得票最新
    头像
    款冬
      1.5k4919

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

      头像
      m.o
        73717

        给黄色一个 margin-right

        头像
        zengkan0703
          1.2k2622

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

          头像
          wangshikun
            3145913
            头像
            四月的桜和猫
              3.3k52955
              头像
              要做大佬的小白
                39284875

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

                头像
                我爱萨摩耶
                  5228
                  <!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>

                  头像
                  lea_
                    25316

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

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

                    查看全部 8 个回答
                    推荐问题
                    宣传栏