【css】css实现布局：左：200px，右：30%，中：自适应

绝地灬酷狼 2022-04-16 06:16 237阅读 0赞

题目来源于今日头条一面，当时想的不全，现在总结一下

#### 第一种方法：浮动布局 ####

<style>
        body {
          padding:50px;
        }
        * {
          box-sizing: border-box;
        }
        .clearfix::after {
          content: '';
          display: block;
          clear: both
        }
        .parent {
          width: 100%;
          border: 1px solid red
        }
        .parent > div {
          float: left;
        }
        .left {
          width: 200px;
          background-color: aqua;
        }
        .right {
          width: 30%;
          background-color:blue;
        }
        .center {
          width: calc(70% - 200px);
          background-color:brown;
        }
      </style>
     <div class="parent clearfix">
        <div class="left">
          left
        </div>
        <div class="center">
          center
        </div>
        <div class="right">
            right
        </div>
      </div>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]

### 第二种方法：绝对定位 ###

<style>
        body {
          padding:50px;
        }
        * {
          box-sizing: border-box;
        }
        .parent {
          width: 100%;
          border: 1px solid red;
          position: relative;
        }
        .left {
          position: absolute;
          width: 200px;
          left: 0;
          background-color: aqua;
        }
        .right {
          position: absolute;
          width: 30%;
          right: 0;
          background-color:blue;
        }
        .center {
          position: absolute;
          left: 200px;
          right: 30%;
          background-color:brown;
        }

![在这里插入图片描述][20181118161614112.png]

### 第三种：flex布局 ###

<style>
        body {
          padding:50px;
        }
        * {
          box-sizing: border-box;
        }
        .parent {
          width: 100%;
          border: 1px solid red;
          display: flex;
        }
        .left {
          width: 200px;
          background-color: aqua;
        }
        .right {
          width:  30%;
          background-color:blue;
        }
        .center {
          flex: 1;
          background-color:brown;
        }
      </style>

![在这里插入图片描述][2018111816182124.png]

### 第四种 grid布局 ###

body {
          padding:50px;
        }
        * {
          box-sizing: border-box;
        }
        .parent {
          width: 100%;
          border: 1px solid red;
          display: grid;
          grid-template-columns: 200px auto 30%;
        }
        .left {
          background-color: aqua;
        }
        .right {
          background-color:blue;
        }
        .center {
          background-color:brown;
        }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]: /images/20220416/735c105e1be646578f28433ce457f860.png
[20181118161614112.png]: /images/20220416/2813b35de3fc4a16a44216d9243b5692.png
[2018111816182124.png]: /images/20220416/ee188cb09a144675a4d304614ccc3836.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]: /images/20220416/bb9f28697bc7428f951c85c2ac463fce.png

发表评论取消回复

表情：

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

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

相关阅读

相关自适应布局

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应左侧固定，右侧自适应 1、子元素 float:left // html部分 <div c

梦里梦外;/ 2023年08月17日 17:39/ 0 赞/ 136 阅读

相关 flex自适应的两种布局方式；上中下，左中右布局自适应；两端固定高度或者宽度，中间自适应的布局

上中下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

女爷i/ 2022年11月16日 15:14/ 0 赞/ 383 阅读

相关 css布局右固定,css实现左侧固定右侧自适应的布局方式

一.浮动布局 1.先让固定宽度的div浮动！使其脱离文档流。 2.margin-left的值等于固定div的宽度相等。 .aside\{ float: left; w

雨点打透心脏的1/2处/ 2022年09月02日 14:55/ 0 赞/ 270 阅读

相关使用AdaptiveTrigger实现自适应布局

这篇博客将介绍如何在UWP开发中使用AdaptiveTrigger实现自适应布局。场景1：窗体宽度大于800时，窗体背景色为绿色，窗体在0到800之间为蓝色。 !

Dear 丶/ 2022年07月14日 09:44/ 0 赞/ 220 阅读

相关多种方法实现自适应布局

最近切了几个手机端的网页，第一次切的是美团的首页，为了自适应不同的手机分辨率，需要用到自适应布局，切图的时候是用的第一中方法，用到了定位，后来查找了一些其他方法，现在就介绍几种

冷不防/ 2022年06月16日 08:29/ 0 赞/ 349 阅读

相关如何实现自适应布局的？

最近为了能够做出自适应的页面找了很多资料，大致较为有用的两类 1.根据屏幕大小不同引入不同的css样式文件 <link href="css/css-pc.css"

亦凉/ 2022年05月31日 03:09/ 0 赞/ 328 阅读

相关面试准备（一）---左固定右自适应布局

左固定右自适应布局这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。现在我们来看

末蓝、/ 2022年05月19日 03:21/ 0 赞/ 212 阅读

相关假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

解决方案： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta

港控/mmm°/ 2022年05月11日 03:00/ 0 赞/ 106 阅读

相关 Div+Css实现经典左中右布局

三栏布局，中间自适应高度效果图: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

雨点打透心脏的1/2处/ 2022年04月24日 09:52/ 0 赞/ 285 阅读

相关【css】css实现布局：左：200px，右：30%，中：自适应

题目来源于今日头条一面，当时想的不全，现在总结一下第一种方法：浮动布局 <style> body { padding:50

绝地灬酷狼/ 2022年04月16日 06:16/ 0 赞/ 238 阅读