左边固定，右边自适应及左边自适应，右边固定布局的几种方法

我就是我 2022-09-25 12:18 143阅读 0赞

自适应布局在现在的布局中，很容易遇见，下面是在平时工作中对左边固定，右边自适应及左边自适应，右边固定布局的几种方法的一些总结，希望能帮到大家，如果大家有更多更好的意见，欢迎补充！

页面布局如下：

![Center][]

**一、左边固定，右边自适应的布局**

**1. 左边左浮动，右边加个overflow:hidden;**

\#lt\{ float: left;width:200px; background: \#ff0;\}

\#rt\{ overflow: hidden; background: \#f0f;\}

**2. 左边左浮动，右边加个margin-left;**

\#lt\{ float: left; width:200px; background: \#ff0;\}

\#rt\{ margin-left: 200px; background: \#f0f;\}

**3. 左边绝对定位，右边加个margin-left;**

\#lt\{ position: absolute; top:0; left:0; width:200px; background: \#ff0;\}

\#rt\{ margin-left: 200px; background: \#f0f;\}

**4. 左右两边绝对定位，右边加个width,top,left,right**

\#lt\{ position: absolute; top:0 ; left:0 ;width:200px; background: \#ff0;\}

\#rt\{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: \#f0f;\}

效果图如下：

![Center 1][]

**二、右边固定，左边自适应的布局**

**1. 左边左浮动，margin-left负值,右边右浮动;**

\#lt\{float:left; width:100%;background: \#00f;margin-right: -200px;\}

\#rt\{float: right; width: 200px;background: \#ff0;\}

**2. 右边绝对定位，左边margin-right;**

\#lt\{margin-right:200px; background: \#00f;\}

\#rt\{ position: absolute; right:0; top:0; width: 200px;background: \#ff0;\}

**3. 左右两边绝对定位，左边加个width,top,left,right**

\#lt\{  position: absolute; top:0;  left:0;  rigth:0;  width: 100% ;   background: \#f0f; \}

\#rt\{  position: absolute; top:0;  left:200px;  width:200px; background: \#ff0; \}

效果图如下：

![Center 2][]

上面的方法在各浏览器的测试中，都能兼容！

[Center]: /images/20220717/96025c15a7f442f689308d7fdaa49603.png
[Center 1]: /images/20220717/731ae053ac17445987cc956ea3ddcadc.png
[Center 2]: /images/20220717/8a2dd0722abc4a5fb79b005da2fa5cc4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 html漂浮在左侧不动,CSS实现左边不动，右边自适应布局

如题，通过不事时功来这制请例在屏随会和时实于幻近支CSS实现左边固定，右边自适应的布局。主要有以下两种方法，均在能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以

小灰灰/ 2022年10月05日 15:56/ 0 赞/ 108 阅读

相关左侧固定，右侧自适应的两种方法

方法一：使用并列的两个div，一个position:abosolute，一个设置margin-left 代码： <body> <div id="t

蔚落/ 2022年09月30日 15:52/ 0 赞/ 129 阅读

相关左边固定，右边自适应及左边自适应，右边固定布局的几种方法

自适应布局在现在的布局中，很容易遇见，下面是在平时工作中对左边固定，右边自适应及左边自适应，右边固定布局的几种方法的一些总结，希望能帮到大家，如果大家有更多更好的意见，欢迎补充

我就是我/ 2022年09月25日 12:18/ 0 赞/ 144 阅读

相关三栏布局——左右固定，中间自适应

之前有写过关于固定父布局，然后父布局内有是两列自适应。现在我们来看看三栏布局，当左右固定，中间的布适应是如何实现的。这里将介绍两种方法，一种是使用margin值，另

Dear 丶/ 2022年06月12日 01:45/ 0 赞/ 233 阅读

相关 CSS布局——左边固定，右边自适应的4种方法

HTML： <div class="outer"> <div class="left">我在左边</div>

ゞ浴缸里的玫瑰/ 2022年05月28日 12:58/ 0 赞/ 301 阅读

相关 css一侧固定，一侧自适应布局的实现

左侧固定，右边自适应这是一个很常用的css布局，尤其是在后台页面当中，使用频繁。同事也是面试当中常常问到的考点。今天，我们就来总结一下。第一种方法：浮动布局

素颜马尾好姑娘i/ 2022年05月15日 04:50/ 0 赞/ 196 阅读

相关经典面试题（一）：俩个div并排，左边div固定宽度，右边宽度自适应

在地铁上无聊看到一个面试帖子，“俩个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。嗡，写了这么多年代码，竟然只能列出2种。回来还是写几个例子验证下。

柔情只为你懂/ 2022年04月14日 03:51/ 0 赞/ 237 阅读

相关 css实现左边高度自适应右边高度

css样式： <style> .container { width: 960px;

一时失言乱红尘/ 2022年04月11日 14:07/ 0 赞/ 402 阅读

相关同行div，左边自适应，右边固定宽度

css: .left\{ width: 100%; float: left; margin-right: -132px; \} .lcon

本是古典何须时尚/ 2022年01月28日 04:53/ 0 赞/ 463 阅读

相关 input左边固定宽度，右边自适应布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

淩亂°似流年/ 2021年07月26日 19:48/ 0 赞/ 484 阅读