CSS怎么实现两个div一个固定宽另一个填充剩余空间?

秦羽
  • 351

怎么优雅的实现这种效果

回复
阅读 668
4 个回答
linong
  • 25.8k

flex 布局。右面 flex:auto 即可

  • 还有 grid 可以实现。
  • 还有padding + absolute
  • 浮动也行
  • 纯 absolute 也可

直接设置另外一个盒子的宽度为:calc(100% - 200px) 不可以吗

BetaZhang
  • 2
新手上路,请多包涵

CSS Flexible Box Layout

Code:
<style>
    .parent{
        display: flex;

        height: 100px;
    }

    .parent div:first-child{
        flex: none;

        width: 100px;

        background-color: red;
    }

    .parent div:last-child{
         flex: auto;

         background-color: orange;
    }
</style>
<div class="parent">
    <div>flex: none; width: 100px</div>
    <div>flex: auto;</div>
</div>
Preview:
image.png
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏