css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度

Posted 2023-04-13

可以实现，

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>

/*利用bfc*/
.box
   height: 200px;
   background: red;

.left
   width: 100px;
   height: 150px;
   background: blue;
   float: left;

.right
   height: 150px;
   overflow: hidden;
   background: orange;

/*定位*/
.box
    height: 200px;
    background: red;
    position: relative;

.left
    width: 100px;
    height: 150px;
    background: blue;

.right
    height: 150px;
    background: orange;
    position: absolute;
    right: 0;
    top: 0;
    left: 100;
 

/*不考虑兼容的话，弹性盒*/
.box
  width: 100%;
  height: 200px;
  background: red;
  display: flex;

.left
  width: 100px;
  height: 150px;
  background: blue;

.right
  flex:1;
  height: 150px;
  background: orange;

参考技术A     .content
    width:1000px;
    height:500px;
  
  .left
    float:left;
    width:300px;
    height:100%;
    background:green;
  
  .right
    width:100%;
    height:100%;
    margin-left:300px;
    background:red;
  

 <div class="content">
    <div class="left"></div>
    <div class="right"></div>
  </div>

左边div左浮动，宽度300；右边div用margin-left挤到右边，宽度设为100%

效果图：

参考技术B

可以的，比如dom结构如下，

<div>
<div class='div1'></div>
<div class='div2'></div>
</div>

.div1 
width: 200px;
height: 300px;
display: inline-block;

.div2 
width: calc(100% - 200px);
height: 300px;
display: inline-block;

这样就可以达到题中所述的效果了。

本回答被提问者采纳

css 两列布局 右边固定 左边可伸缩 但是有最小宽度 如何实现？

至少也给出个类似于百度的搜索结果页的布局：右边块固定大小，左边块也固定大小，右边块向右边浮动。拉伸变动浏览器的大小，能改变左右2块的距离，中间空白 可伸缩。如何实现。看百度的搜索结果页，就能知道什么效果了。

参考技术A 你要留在中间的给他加个css样式
样式就用.BD表示
就写
.BDmargin:0px
auto;width:400px;height:300px
然后给你的右边那个弄个绝对定位
.Bdposition:absolute;right:0px;top:0px
把这两个样式弄进去就ok了
右边漂浮的东西