CSS布局，上下布局，左右布局，一列固定，剩下的自适应屏幕大小

最新推荐文章于 2023-11-24 11:15:58 发布
最新推荐文章于 2023-11-24 11:15:58 发布
阅读量2.4w 收藏 37
点赞数 7
分类专栏： 前端 WEB 文章标签： CSS 布局 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012589022/article/details/79233289
版权

情形1：在固定容器大小内左右布局

在一个1000*500大小的容器内，实现左侧固定宽度，右侧根据剩下空间自适应宽度的布局。

HTML：

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

CSS:

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
.wrapper {
    position: relative;
    top: 50px;
    left: 50px;
    border: 1px solid;
    width: 1000px;
    height: 500px;
}
.left {
    width: 220px;
    height: 100%;
    background-color: #2fa8ec;
}
.right {
    position: absolute;
    top: 0;
	bottom: 0;
    left: 220px;
    right: 0;    
    background-color: yellow;
}

效果图：

图1

情形2：不在固定大小容器内，根据浏览器大小，左侧固定宽度，右侧自适应，与浏览器窗口等高。

 

HTML：

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

CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
.left {
    width: 220px;
    height: 100%;
    background-color: #2fa8ec;
}
.right {
    position: absolute;
    top: 0;
    left: 220px;
    right: 0;
    background-color: yellow;
    height: 100%;
}

效果图：

图2

 

情形3：三列布局，左右固定，中间自适应大小

HTML：

<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>

CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
.left {
    width: 220px;
    height: 100%;
    background-color: #2fa8ec;
}
.center {
    position: absolute;
    top: 0;
    left: 220px;
    right: 200px;
    bottom: 0;
    background-color: yellow;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background-color: chartreuse;
}

效果图：

图3

 

情形4：上下三列布局，头部和底部固定高度，中间自适应屏幕高度

常用于顶部显示logo、标题等内容，中间部分展示主体信息，底部显示公司版权信息等。

HTML:

<body>
    <div class="top">XXX系统展示平台</div>
    <div class="middle">主体信息</div>
    <div class="bottom">Copyright © 2018 XXX公司版权所有</div>
</body>

CSS:

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
.top {
    width: 100%;
    height: 70px;
    background-color: #2fa8ec;
    font-size: 30px;
    line-height: 70px;
}
.middle {
    position: absolute;
    top: 70px;
    bottom: 40px;
    width: 100%;
    background-color: yellow;
    font-size: 70px;
    text-align: center;
}
.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px; /*行高与高度相等，内容垂直居中*/
    background-color: chartreuse;
    text-align: center;
}

效果图：

图4

 

Tips：

① 设置浏览器满屏，无滚动条

html, body {
    width: 100%;
    height: 100%;
}

② 对于自适应大小的一列（行），采用绝对定位方式，如果不设置高（宽）为100%的话，可以通过设置top、bottom、left、right来进行拉伸以显示；

 

YLeee
关注
  • 7
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS三列布局之左右宽度固定，中间元素自适应问题
qq_31965515的博客
04-08 2155
最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。 首先我想到的是float——浮动布局 使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。 <!DOCTYPE html>...
html左右两栏布局实现
qq_32945453的博客
06-13 1943
两栏布局实现
CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 6063
本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第一种方案，后边会写一篇博客写第二种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局 浮动布局 圣杯布局 双飞翼布局 表格布局（不推荐） 绝对定位布局（不推荐）
css三列布局--两边固定中间自适应和中间固定两边自适应
热门推荐
DOM曼珠沙华的博客
03-25 2万+
三列布局    本篇讲三列布局，面试常考题，自己总结的，如有什么问题，欢迎指出！我会用红色标注出主要作用部分，都是最精简的写法，，没有多余的修饰。布局方式一:两边固定中间自适应1.flex布局    思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）&lt;!DOCTYPE html&gt; &lt;html&gt; ...
CSS之布局系列--三列布局(中间固定，两边自适应)--方法/实例
IT利刃出鞘的博客
11-28 2070
​ 本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第2种方案。 中间固定，两边自适应，一般不太常用。比如：一个网站要适应不同的电脑屏幕大小，一般是确定两边的宽度，中间去适应。 中间固定，两边自适应，一共有如下几种方案： flex布局（推荐） 浮动布局（float）
css实现两列布局，一列固定宽度，一列宽度自适应方法
low666的博客
04-08 1501
css实现两列布局，一列固定宽度，一列宽度自适应方法 固定宽度区浮动，自适应区不设宽度而设置 margin <div id="wrap"> <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div> <div id="content" style="he...
CSS布局之两列布局一列固定一列自适应
roisane的博客
10-21 908
一、通过浮动和margin-left 左列 右列 footer *{ margin:0; padding:0; } body{ width: 800px; margin:auto; } .left{ background-color: red; width:200px; height:20px;
flex 固定一列_一列固定一列自适应布局-flex布局实现
weixin_42318815的博客
12-24 1662
flex布局，弹性盒子布局。声明了display:flex;即变为伸缩容器，在伸缩容器内的所有子元素将自动变成伸缩项目flex items.常结合使用的属性有 dispaly:flex; flex-flow:row; 伸缩项目单行排列或者flex-flow:column; 伸缩项目单列排列这里利用flex布局实现一列固定，一列自适应.parent{width:100%;height:500px...
CSS应用之实现三列布局（左右固定宽度，中间自适应）
Freya_yyy的博客
07-20 1万+
实现一个三列布局的左右宽度固定，中间自适应。可以使用传统的css布局，也可以使用css3的新特性flex布局实现。 补充圣杯布局和双飞翼布局。 1.使用自身浮动法： 自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。 该布局法的不足是三个元素的顺序...
css中flex两列布局（一列自适应其他固定）
https://ligo100.cn 小何博客欢迎访问。
11-24 1243
最近写一个布局的时候，遇到一个问题。在没有图片的时候布局是正常的，如果有图片且设置了width:100%;则会出现图片将自适应布局撑开的情况。我的解决方式是让图片不缩放，图片外层再添加一个div元素。大家有什么更好的方式麻烦告知我一下呗，多谢！
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
07-28
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
智慧校园整体解决方案-6PPT(102页).pptx
07-28
智慧校园整体解决方案是响应国家教育信息化政策，结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础，旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变，通过自动数据采集、智能分析和按需服务，实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通，确保系统能够满足不同用户角色的需求，并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面，构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等，以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能，增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术，实现人员和设备的智能管理，提高校园运营效率。 智慧教学部分，方案提供了智慧学习系统和精品录播教室方案，支持专业级学习硬件和智能化网络管理，促进个性化学习和教学资源的高效利用。同时，教学质量评估中心和资源应用平台的建设，旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理，通过智慧教室管理系统实现教室环境的智能控制和能效管理，打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设，将作为智慧校园的核心和入口，提供教务、一卡通、图书馆等系统的集成信息。 总体而言，智慧校园整体解决方案通过集成先进技术，不仅提升了校园的信息化水平，而且优化了教学和管理流程，为学生、教师和家长提供了更加便捷、个性化的教育体验。
anaconda配置pytorch环境.pdf
最新发布
07-28
使用Anaconda配置PyTorch环境是一个相对直接的过程，以下是一个详细的步骤指南，包括Anaconda的下载与安装、PyTorch环境的创建以及PyTorch的安装与验证。 一、Anaconda的下载与安装 1.访问Anaconda官网： 1.前往Anaconda官网下载最新版本的Anaconda。 2.下载Anaconda： 1.在官网首页，点击“Free Download”按钮，选择合适的操作系统版本进行下载。 3.安装Anaconda： 1.双击下载好的Anaconda安装包，按照提示进行安装。 2.注意选择安装路径（建议不安装在C盘），并确保安装路径为全英文。 3.安装过程中，根据需要选择“为所有用户安装”或“仅为当前用户安装”。 4.验证Anaconda安装： 1.安装完成后，打开“Anaconda Prompt”（或Anaconda Navigator），输入conda --version查看conda版本，以验证Anaconda是否安装成功。 二、创建PyTorch环境 1.打开Anaconda Prompt： 1.在开始菜单中找到并打开“Anaconda Pro
2024小米SOC面试经验
07-28
• 自我介绍，然后针对项目实习进行提问。 • sdram仲裁模块设计：面试官询问了我关于sdram（同步动态随机存取存储器）仲裁模块的设计思路，这可能涉及到如何高效地管理多个设备或进程对sdram的访问，确保数据一致性和性能优化。 • FIFO设计：我们探讨了FIFO（先进先出队列）是否使用了现成的IP核（知识产权核），并假设如果我自己设计FIFO时可能遇到的难点，如同步问题、缓冲区管理、性能优化等。 • 跨时钟域问题：讨论了跨时钟域信号同步的挑战，特别是信号展宽（metastability）的解决策略，这是确保数据在不同时钟域间可靠传输的关键。 • TMDS编码流程：面试官询问了我TMDS（Transition Minimized Differential Signaling，转换最小化差分信号）编码的具体流程，这通常涉及视频或高速数据传输领域，要求我对数据传输协议有深入理解。 • 项目调试方法：面试官要求我分享在项目中如何进行调试的经验，包括使用的工具、调试策略及问题解决过程。
1920x1080尺寸的NV12 YUV的图像数据
07-28
1920x1080尺寸的NV12 YUV的图像数据
步行街招商计划书范本（附租赁合同等）.doc
07-28
商业计划书，创业计划书，项目计划书，计划书模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
考勤表模板---自动计算.xlsx
07-28
考勤表，Excel模版
【2021】2021年数字化汽车报告- 洞察全球移动出行市场（首篇）-PWC_44页.pdf
07-28
【2021】2021年数字化汽车报告- 洞察全球移动出行市场（首篇）-PWC_44页.pdf
用html和css写一个三栏布局，要求左右宽度固定中间自适应。
08-10
### 回答1： <div style="width:100%;"> <div style="float:left;width:30%;">左栏内容</div> <div style="float:left;width:40%;margin-left:2%;">中间栏内容</div> <div style="float:right;width:30%;">右栏内容</div> </div> ### 回答2： 可以使用HTML和CSS来创建一个三栏布局，其中左右两列的宽度固定，而中间列的宽度自适应。 首先，我们需要使用HTML创建一个三列的容器，可以使用`<div>`标签来实现。代码如下： ```html <div class="container"> <div class="left-column"></div> <div class="middle-column"></div> <div class="right-column"></div> </div> ``` 接下来，我们可以使用CSS来设置样式，以实现固定宽度和自适应宽度的效果。首先，我们设置三列容器的样式，将其设置为一行布局，并使用`display: flex;`属性，使其自动伸缩。同时，设置容器的宽度为100%，以确保占据整个容器的宽度。代码如下： ```css .container { display: flex; width: 100%; } ``` 接下来，我们为左中右三列设置样式。设置左右两列的宽度为固定值，例如200像素。代码如下： ```css .left-column { width: 200px; } .right-column { width: 200px; } ``` 为了让中间列自适应宽度，我们可以使用`flex-grow`属性，设置中间列的伸缩比例为1，使其自动填充剩余的宽度。代码如下： ```css .middle-column { flex-grow: 1; } ``` 最后，为了使布局更加美观，我们可以为三列容器和内部的列添加一些样式，例如背景色和内边距。代码如下： ```css .container { background-color: #f1f1f1; padding: 10px; } .left-column, .middle-column, .right-column { background-color: #e0e0e0; padding: 10px; margin: 5px; } ``` 通过这样设置，我们就可以得到一个具有固定宽度左右列和自适应宽度中间列的三栏布局。 请注意，以上代码只是一个示例，你可以根据自己的需求进行调整和修改。 ### 回答3： 要实现一个左右宽度固定中间自适应的三栏布局，可以使用HTML和CSS进行编写。 首先，在HTML中，我们可以使用```<div>```标签来创建三个元素，分别代表左栏、中栏和右栏。例如： ``` <div class="left-column">左栏内容</div> <div class="middle-column">中栏内容</div> <div class="right-column">右栏内容</div> ``` 然后，我们需要使用CSS来设置这些元素的样式。首先，设置左栏和右栏的宽度固定，可以使用```width```属性进行设置，例如： ``` .left-column { width: 200px; } .right-column { width: 200px; } ``` 接下来，设置中栏的宽度自适应，可以使用```flexbox```布局来实现。在CSS中，将父元素设置为```display: flex;```，然后将中栏设置为```flex-grow: 1;```，这样中栏的宽度将会自适应。例如： ``` body { display: flex; } .middle-column { flex-grow: 1; } ``` 最后，可以添加一些样式来美化布局，如设置背景颜色、边框样式等。 完整的HTML和CSS代码如下： ``` <!DOCTYPE html> <html> <head> <style> .left-column { width: 200px; background-color: lightgray; } .middle-column { flex-grow: 1; background-color: white; } .right-column { width: 200px; background-color: lightgray; } </style> </head> <body> <div class="left-column">左栏内容</div> <div class="middle-column">中栏内容</div> <div class="right-column">右栏内容</div> </body> </html> ``` 通过上述HTML和CSS代码，我们实现了一个左右宽度固定中间自适应的三栏布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值