响应式布局之左侧固定，右侧随宽度变化

最新推荐文章于 2023-01-14 10:00:45 发布
最新推荐文章于 2023-01-14 10:00:45 发布
阅读量429 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amily8023/article/details/85160902
版权

width: -webkit-calc(100% - 1351.68px);

用这个就可以实现右边的内容用百分比做，实现右侧自适应

或者媒体查询

例如：

在宽度不小于700px，且设备是横屏的手持设备

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

或者flex布局

Deamy8023
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-07-28 响应式布局：左侧宽度固定右侧宽度自适应、双飞翼布局、圣杯布局
kesin_lee的博客
07-28 241
三种布局都是最先加载出主体。 双飞翼布局与圣杯布局都是 中间盒子宽度自适应，最先加载出主体 双飞翼布局与圣杯布局的不同之处在于： 双飞翼布局在主体内容中添加了一个div ，并对主体添加margin来使左右盒子不覆盖主体。 而圣杯布局并没有在主体中添加新的div，只是对整体添加左右填充、左右盒子添加相对定位，来达到效果。 左侧宽度自适应 body中需要先写出自适应宽度的div <div class="box"> <div class="right">right<
CSS布局之一侧固定宽度一侧自适应
郭佩东的技术之路
08-03 881
CSS布局之一侧固定宽度一侧自适应 1、float+margin; 2、position+margin; 3、float+负margin+嵌套div; 4、display:table+display:table-cell;
css布局 左侧固定 右边自适应屏幕
最新发布
jieyucx的博客
01-14 167
css常用布局左侧固定 右侧自适应
响应式居右导航栏
q850593913的博客
06-06 312
响应式导航栏 <nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <style> h
关于左边固定，右边自适应布局的响应式布局写法
weixin_30265171的博客
02-25 131
关于响应式布局现才接触到，虽然代码很简单，但是对基础要求还是有一些。 1.left设置position:absolute和width：70px；那么右边用margin-left：70px；因为是响应式的我用jquery设置了一下高度（不用jquery，直接设置高度为100%好像不行，不知道为什么有知道的小伙伴，可以在下面留言，有改进的也可以在下面留言）；代码如下 <!DOCTYPE ...
响应式布局的简单案例
09-24
响应式布局是一种网页设计技术，它能够确保网页在不同设备上具有良好的显示效果，无论是在桌面电脑、平板电脑还是手机上，用户都能获得满意的浏览体验。一个优秀的响应式布局应当能够让网页内容自动适应不同的屏幕...
html----响应式布局，左侧栏目固定，右侧内容随着屏幕宽度变化而变化
weixin_33701251的博客
02-19 2298
1. 响应式布局，左侧栏目固定，右侧内容随着屏幕宽度变化而变化（高频） flex布局 position布局 css3计算宽度 float布局 4.float布局（面试官想要的答案）-------------------------------------根据float元素的margin特性布局，兼容性好 // html <div class="box"...
css实现右侧固定宽度 左侧宽度自适应
09-24
【CSS布局实现】在网页设计中，经常需要创建一种布局模式，使得页面右侧部分具有固定宽度，而左侧部分根据浏览器窗口大小自适应调整宽度。这种布局模式在许多网站，包括博客园的一些默认主题中非常常见。通常，固定...
HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例
12-13
本示例探讨了如何使用HTML和CSS实现一个两列布局，其中左侧宽度固定，右侧则自适应剩余空间。以下是对这两种方法的详细解释： **实现一：利用浮动（Float）** 在第一种方法中，我们主要利用CSS的`float`属性来实现...
CSS实现两栏布局，左边固定，右边自适应的4种方法
11-21
1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
响应式布局：左侧固定右侧自适应
杨柳岸的博客
11-30 281
响应式布局设计常用的三种方法
右侧边栏实现（博客）
wenjiusui8083的博客
01-13 2563
1.html 可以加一个遮罩层mask，nav如下： 生如夏花 首页 简介 关于 联系 侧边栏如下： list2 list2 list2 list2 2.css #sidebar{ /*display: none;*/ position: fixed
HTML——左右侧边栏布局
笨鸟
11-01 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 上中下布局 body{ background: #42413C ; margin: 0;/*消除body中的留白*/ padding: 0; text-al
CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法
weixin_33701564的博客
09-05 169
代码： 1 <!-- 1 float --> 2 <h3 class="block">第一种方法-float</h3> 3 <div class="tips"> 4 <h4 class="tips-info">关键点</h4> ...
立马就会的纯css实现自适应(左)右侧栏悬浮和底部悬浮
码农的艺术
11-30 6211
有一天leader走到我旁边，笑嘻嘻的和我说让我弄一个有意思的东西，给公司H5页面左边栏加一个二维码图片，准备交给前端做的时候发现公司没有前端，嘤嘤嘤~。经过不断的尝试顺便做个笔记，分享给大家。
CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局
weixin_30765505的博客
05-26 200
效果演示 实现原理 使用3个div（一个是顶部栏，一个是左侧栏，一个是右侧栏）； 使用checkbox作为判断是否显示和隐藏右侧栏，点击显示和隐藏label实现最终效果。 代码说明 css <style> body { font-family:"Microsoft YaHei",arial,sans-serif; margin...
HTML页面左侧菜单栏切换实现右侧主体内容改变
大海无量的博客
03-01 3万+
原先是用iframe，后来有更好的方法 参考：https://blog.csdn.net/qq_36538012/article/details/80279139
HTML5实现一种很常见的网页布局设计（导航栏在左侧）
热门推荐
weixin_44520259的博客
05-16 3万+
一、代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>页面布局2</title> <style type='text/css'> /*下面的星号让素有元素内外边距都为0，不留空隙*/ *{ pa...
jQuery展开折叠侧栏导航菜单
theScoreONE的博客
05-25 4282
< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目， <dd>< /dd>用来创建列表中最下层项目， < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。 效果图 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
CSS媒体查询实现响应式布局技巧
"这篇文章主要介绍了如何使用CSS实现响应式布局，包括了三种使用@media查询的方法。响应式布局是让网站在不同设备上呈现良好效果的关键技术。" 在Web设计领域，响应式布局是一项核心技能，它允许网页在不同尺寸的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值