css自适应布局

最新推荐文章于 2023-05-26 15:52:42 发布
最新推荐文章于 2023-05-26 15:52:42 发布
阅读量207 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/simper_boy/article/details/82263370
版权

左右固定，中自适应布局
利用弹性布局，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.box{
		display: flex;
	}
	.left {
		width: 200px;
		height: 100px;
		float: left;
		background-color: red;
	}
	.right {
		width: 120px;
		height: 100px;
		float: right;
		background-color: blue;
	}
	.middle {
		flex: 1;
		height: 100px;
		background-color: black;
	}
</style>
<body>
	<div class="box">
		<div class="left"></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
</body>
</html>
<script>

</script>

左固右适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
/*  .wrap {
        }

        .left {
            width: 500px;
            height: 200px;
            background-color: red;
            float: left;
        }

        .right {
            margin-left: 500px;
            height: 200px;
            background-color: blue;
        }
 */

/* 方法2 */
        .wrap{
                height: 200px;
        }
        .left{
        width: 500px;
                height: 200px;
        float:left;

        background:red;

        }
    .right{
        overflow:hidden;
                height: 200px;
        background:blue;
        } 

/* 方法3 */
    /* .wrap {
            display: flex;
        }

        .left {
            width: 200px;
            background-color: red;
        }

        .right {
            flex: 1;
            height: 200px;
            background-color: blue;
        } */
</style>
<body>
    <div class="wrap"> 
            <div class="left"></div> 
            <div class="right"></div> 
    </div> 
</body>
</html>

上下固定，中适应并出现滚动条
采用定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	html,body {
		height: 100%;	
		margin:0;
    	padding:0
	}
 
	.header {
		height:100px;
	    line-height:100px;
	    background:red;
	    width:100%;
	    position:absolute;
	    z-index:5;
	    top:0;
	    text-align:center;
	}
	.footer {
		height:100px;
	    line-height:100px;
	    background:blue;
	    width:100%;
	    position:absolute;
	    z-index:200;
	    bottom:0;
	    text-align:center;
	}
	.middlebody {
	    background-color: orange;
	    width:100%;
	    overflow:auto;
	    top:100px;
	    position:absolute;
	    z-index:10;
	    bottom:100px;
	}
	.middle {
		padding: 20px;
	}
</style>
<body>
	<body>
	
		<div class="header"></div>
		<div class="middlebody">
			<div class="middle">
				<p>dadda</p>
				<p>dadda</p>
				<p>dadda</p>
				<p>dadda</p>
				<p>dadda</p>
				<p>dadda</p>
			</div>
		</div>
		<div class="footer"></div>
	
</body>
</body>
</html>

一些布局知识请参考css布局

Smirky-boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
几种css自适应布局方式
sinat_19594515的博客
11-09 4620
1.float+margin（自适应的那个元素），适应横向布局 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>左中右三列 左右固定200px 中间自适应占满</title> <style> bo...
CSS自适应布局思路
09-27
在Web开发中，CSS自适应布局是构建响应式网站的关键技术，它使得网页可以根据不同设备的屏幕尺寸和方向进行适配，提供良好的用户体验。本篇文章主要探讨CSS自适应布局的思路，以帮助对CSS布局样式感兴趣的开发者更好...
CSS自适应布局
CongJiYong的博客
06-14 478
自适应布局
css什么是自适应布局,css 自适应布局阮一峰
weixin_30972131的博客
08-04 998
转载一篇文章：自适应网页设计(Responsive Web Design)作者：阮一峰移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上(目前主流宽度是1366×768)，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都...
css什么是自适应布局,CSS自适应布局思路
weixin_29468561的博客
08-04 1079
最近在做一个自适应布局的项目，所以学了下自适应，下面是总结。此总结只做效果，不关注效率和代码优化。1.css3html中添加css中的整体布局CSS Code复制内容到剪贴板@mediascreenand(min-width:0px){公共css可以写在这里，也可以单独写出来，公共css}@mediascreenand(min-width:380px){大于380px,包括>413，&...
CSS自适应布局总结
m0_59113028的博客
02-22 431
CSS自适应布局总结
CSS 自适应布局(flex布局)
weixin_43045869的博客
07-23 1747
flex 布局、超出自动换行、自适应
css什么是自适应布局,CSS自适应布局
weixin_42300896的博客
08-04 1295
今天小编介绍自适应布局实现方法的demo，1)左侧固定宽度，右侧自适应，随着窗口的宽度而变化；2)右侧固定宽度，左侧自适应；3)中间自适应，两边定宽1、左定宽用左侧margin-left设为负宽度的方法，因为左侧脱离文档流，右侧宽度设为100%效果如下：left.png代码如下：.head{display: block;text-align: center;line-height: 50px;he...
CSS自适应布局分
一只小白奔向大牛的故事
02-25 288
自适应布局分两类：高度和宽度，方法有很多，我用三列布局举例，我就列几个通俗易懂的例子呗，懂了三列的，两列的原理一样，呵呵哒。 效果图如下：高度自适应——宽度自适应            1,高度自适应布局       原理就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了。代码如下： html代码...
css自适应布局，缩放保持图片比例
qq_48850466的博客
05-26 4207
css自适应布局，缩放保持图片比例
CSS响应式布局（自适应布局）
热门推荐
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
CSS自适应布局实现子元素项目整体居中，内部项目左对齐
12-30
日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往右排列。这里提供一个解决...
css中间自适应布局的5种解法详解
09-22
这些方法可能包括表格布局（table）和网格布局（grid），也都是CSS中实现自适应布局的有效手段。表格布局常用于不规则的布局，网格布局则在CSS Grid Layout标准中提供了更为强大的布局控制能力。 表格布局利用CSS中...
CSS自适应导航菜单的实例代码
09-24
CSS自适应导航菜单是一种根据设备屏幕大小调整布局的菜单，确保在桌面、平板和手机等不同设备上都能提供良好的用户体验。本文将深入讲解如何使用纯CSS实现一个自适应的导航菜单，并提供一个实例代码。 首先，我们来...
工业视觉智能-分割模型基础知识
08-18
根据《阿里云工业视觉智能高级工程师ACP认证免费课程》（https://edu.aliyun.com/course/3128115/lesson/342981389）创建的个人笔记
计算机毕业设计jsp高考志愿选择辅助系统idea论文
08-18
计算机毕业设计jsp高考志愿选择辅助系统idea论文
分享一款特别好看特别美的樱花博客前端页面
08-18
分享一款特别好看特别美的樱花博客前端页面
电脑软件：圆形印章生成.exe
最新发布
08-18
电脑软件：圆形印章生成.exe
安全测试：安全测试策略.zip
08-18
史上最全软件测试技术全套教程，包括： Postman Selenium 单元测试 压力测试 回归测试 安全测试 性能测试 测试工具 集成测试 等流行技术的系列教程
css水平自适应布局
08-03
回答: 在CSS中，有多种方法可以实现水平自适应布局。以下是三种常见的方法: 1. 使用table布局: 可以使用HTML的table元素来实现水平自适应布局。通过设置table的宽度为100%，然后在table的每一行中使用td元素来定义...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值