css自适应布局

最新推荐文章于 2024-06-28 21:22:19 发布
最新推荐文章于 2024-06-28 21:22:19 发布
阅读量482 收藏 2
点赞数
分类专栏： 经验总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linjing127218/article/details/80397239
版权

1.左侧固定，右侧自适应的方法

   第一种：（注意父级中box-sizing: border-box;）

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
padding:0;
margin:0;
}
html,body,.box{
width:100%;
height:100%;
}
.box{
padding-left:100px;
box-sizing: border-box;
}
.left{
width:100px;
height:100%;
float:left;
background: #f00;
margin-left:-100px;
}
.right{
width:100%;
height:100%;
background: #ff0;
}
</style>
<body>
<div class="box">
<div class="left">111</div>
<div class="right">222</div>
</div>
</body>

</html>

2.第二种

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
padding:0;
margin:0;
}
html,body,.box{
width:100%;
height:100%;
}
.left{
width:100px;
height:100%;
float:left;
background: #f00;
}
.right{
width:calc(100% - 100px);
height:100%;
float:right;
background: #ff0;
}
</style>
<body>
<div class="box">
<div class="left">111</div>
<div class="right">222</div>
</div>
</body>
</html>

依欣依意127
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。 代码如下： <!DOCTYPE htm
CSS自适应布局
CongJiYong的博客
06-14 477
自适应布局
最全的前端项目中自适应布局和响应式布局解决方案
最新发布
2301_78320134的博客
06-28 1187
​ 自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式，它为不同的屏幕分辨率定义了不同的布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。当屏幕分辨率发生变化时，页面中元素的位置会变化而大小不会变，从而保持在不同渲染设备下浏览效果的最优化，给用户一致的浏览体验。然而，自适应布局的劣势在于，为了适应不同的设备，同一个页面往往需要开发不同页面，会增加成本，尤其当页面需求发生变化时，会涉及多套代码的改动 ​
CSS 自适应布局
weixin_33698043的博客
03-12 131
前言 本篇文章将介页面布局中的自适应布局，常见的自适应布局有以下2种：左列固定右列自适应、左右两列固定中间自适应。   1. 左列固定右列自适应布局方案 说明：左列固定右列自适应，也可以为右列固定左列自适应，常见于中台管理界面、移动端Web的列表展示等等。 &lt;div class="container"&gt; &lt;div class="left"&gt;固定宽度&...
CSS 自适应布局(flex布局)
weixin_43045869的博客
07-23 1747
flex 布局、超出自动换行、自适应
CSS自适应布局思路
09-27
在Web开发中，CSS自适应布局是构建响应式网站的关键技术，它使得网页可以根据不同设备的屏幕尺寸和方向进行适配，提供良好的用户体验。本篇文章主要探讨CSS自适应布局的思路，以帮助对CSS布局样式感兴趣的开发者更好...
CSS自适应布局实现子元素项目整体居中，内部项目左对齐
12-30
日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往右排列。这里提供一个解决...
css中间自适应布局的5种解法详解
09-22
主要介绍了css中间自适应布局的5种解法详解的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS自适应导航菜单的实例代码
09-24
CSS自适应导航菜单是一种根据设备屏幕大小调整布局的菜单，确保在桌面、平板和手机等不同设备上都能提供良好的用户体验。本文将深入讲解如何使用纯CSS实现一个自适应的导航菜单，并提供一个实例代码。 首先，我们来...
CSS实现三栏自适应布局（两边固定，中间自适应）
Niucode的博客
04-11 830
CSS实现三栏自适应布局（两边固定，中间自适应）
CSS响应式布局（自适应布局）
热门推荐
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
CSS自适应布局总结
m0_59113028的博客
02-22 429
CSS自适应布局总结
css什么是自适应布局,CSS自适应布局
weixin_42300896的博客
08-04 1291
今天小编介绍自适应布局实现方法的demo，1)左侧固定宽度，右侧自适应，随着窗口的宽度而变化；2)右侧固定宽度，左侧自适应；3)中间自适应，两边定宽1、左定宽用左侧margin-left设为负宽度的方法，因为左侧脱离文档流，右侧宽度设为100%效果如下：left.png代码如下：.head{display: block;text-align: center;line-height: 50px;he...
css3 - 一文详解 “自适应布局和响应式布局“ 超详细介绍及原理，以及适用场景！
高级前端工程师
02-03 3354
CSS响应式布局（自适应布局）CSS之布局系列--静态布局、流式布局、自适应布局、响应式，响应式和自适应的区别，响应式布局和自适应布局详解，响应式/自适应/流动布局，多屏自适应响应式布局方案，CSS 静态、流式、自适应、弹性、响应式布局。自适应设计与响应式网页设计的区别，前端常见的五种布局方案，CSS flex布局(弹性布局/弹性盒子)，CSS页面布局(超详解)，css布局教程，CSS 高级布局技巧，最全的CSS自适应布局总结，超详细常用css布局，一文详解CSS常见的五大布局，深入理解CSS布局(转)深入
css什么是自适应布局,css 自适应布局阮一峰
weixin_30972131的博客
08-04 995
转载一篇文章：自适应网页设计(Responsive Web Design)作者：阮一峰移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上(目前主流宽度是1366×768)，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都...
css什么是自适应布局,CSS中常见的自适应布局是什么
weixin_33856590的博客
08-04 2542
CSS中常见的自适应布局是什么发布时间：2020-12-05 13:24:07来源：亿速云阅读：102作者：小新这篇文章主要介绍CSS中常见的自适应布局是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！CSS中常见自适应布局有：左边定宽右边自适应；右边定宽左边自适应；两边定宽中间自适应今天将介绍的是CSS中常见的自适应布局，有一定的参考价值，希望对大家有所帮助。接下来在文...
CSS3_自适应布局
DaftJayee的博客
07-13 534
一、什么是弹性盒布局（可伸缩的盒子） 优势：1》写起来比较简单 2》灵活性、代码优雅 缺点：1》不兼容ie和安卓低级版本 二、使用 容器 (父元素) display:flex : 让容器成员是弹性的项目 flex-direction : 决定主轴是什么方向(项目排序方向) row : 横向 column : 纵向 row-reverse :横向翻转 column-reverse ：纵向翻转 flex-wrap :
css水平自适应布局
08-03
回答: 在CSS中，有多种方法可以实现水平自适应布局。以下是三种常见的方法: 1. 使用table布局: 可以使用HTML的table元素来实现水平自适应布局。通过设置table的宽度为100%，然后在table的每一行中使用td元素来定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值