CSS中左右两块固定，中间自适应的简单实现

最新推荐文章于 2022-04-09 21:43:24 发布

前端小vegetable

最新推荐文章于 2022-04-09 21:43:24 发布

阅读量258

点赞数 1

分类专栏：前端工程师文章标签：前端面试 CSS

本文链接：https://blog.csdn.net/qq_37788021/article/details/96889590

版权

本文记录了一种CSS布局方式，适用于移动端和响应式网页，实现左右两块固定宽度，中间部分自适应宽度的效果。通过设置中间元素的宽度、padding和z-index，解决不同浏览器的兼容性问题，确保布局的正确显示。文中还探讨了CSS基础和面试中可能涉及的知识点。

摘要由CSDN通过智能技术生成

因为在面试中遇到过几次这样一个经典的问题，而且在自己实际开发过程中也遇到过这样的布局要求，所以在此做一个简单的记录,一般的需求场景为根据屏幕大小自适应的调整布局，多出现在移动端和响应式网页中，话不多说，先看最终的效果。

最终效果

<html>
<head>
	<title></title>
	<style type="text/css">
		.left,.right{
    
			position: absolute;
			width: 100px;
			height: 100px

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注