CSS系列教材（二十六）- 布局 - 左右固定，中间自适应的布局

CSS系列教材（二十五）- 布局 - 垂直居中

CSS系列教材（二十七）- 布局 - 一个div始终贴在下方

工具版本兼容问题

步骤 1 :

左右固定，中间自适应的布局

edit 顶折

纠问

运行效果

代码行数较多，请点击查看

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
   width:200px;
   float:right;
   background-color:pink
  }
  .center {margin:0 200px;   background-color:lightblue}
</style>
 
<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
 <div class="center">中间自适应</div>

</head>

<body>

</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

CSS系列教材（二十五）- 布局 - 垂直居中

CSS系列教材（二十七）- 布局 - 一个div始终贴在下方

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2019-12-02 自适应

hx1176406648

关于前端部分-CSS-左右固定 -左右固定，中间自适应的布局的提问

去掉右浮动宽度，利用overflow去掉中间元素的溢出实现自适应

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
   float:right;
   background-color:pink
  }
  .center { overflow:hidden;background-color:lightblue}
</style>
 
<div class="left">左边固定宽度</div>
<div class="right">23454fdgffffffffffffffffffffffffffffffffffffdgdfgfdfgdfgfdgfdgfdggfd2</div>
 <div class="center">中间自适应</div>
</head>

<body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-01-10 例子中 center 的左右外边距 200px 是相对于哪个边框的？

借口可可	关于前端部分-CSS-左右固定的提问我自己试了试，感觉center的margin不是基于左边和右边div的边框的，这个200px似乎是距离body的边框的，这是什么原因？

2 个答案

BeachFish
答案时间：2019-07-02

这个加不加看不出来的，因为左右元素宽度都是200px,你调小就看出来了

LEENO
答案时间：2019-01-21

大概是因为float不占用空间所以margin判断的时候就直接以body来判断了。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-25 这里的margin:0 200px和overflow:hidden有啥区别

2018-09-21 关于右边 div 挤下去的原因

tysontx

关于前端部分-CSS-左右固定的提问

首先声明站长的代码是没问题的。代码中三个 div 的顺序，不是先左边(div)再右边(div)最后中间(div)，会导致右边 div 挤下去。

3 个答案

eds
答案时间：2022-03-03

https://blog.csdn.net/qq_36595013/article/details/81810219

ercilan
答案时间：2020-10-27

因为float是基于原来的位置浮动的，你上几节没看清哦

捣蛋万圣节
答案时间：2019-05-20

看视频有讲到过，兄弟元素不会占用自己兄弟的位子，当左右div 元素在中间div元素下面时，下面的div会另起一行，因为center已经把这一行占满。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-09-20 结果和<div></div>标签的顺序有关

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-CSS-左右固定的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图