左右动态，中间固定左右固定，中间动态

最新推荐文章于 2021-07-22 15:37:48 发布
最新推荐文章于 2021-07-22 15:37:48 发布
阅读量94 收藏
点赞数
原文链接：http://www.cnblogs.com/yanzhuan/archive/2011/11/04/2235254.html
版权

左右动态，中间固定css部分代码
<style type="text/css">
#header,#content,#footer{
 background-color:#ccc;
 border:1px solid #0c0;
 height:30px;
 width:80%;
 margin:10px auto;
 }
#content{
 height:500px;
 }
#left{
 height:500px;
 width:50%;
 float:left;
 margin-left:-50px;
 }
#left1{
  
 height:500px;
 
 background-color:#966;
 margin-left:50px;
 border:1px red solid;
 }
#cont{
 background-color:#000;
 float:left;
 height:500px;
 width:100px;
 }
#right{
 height:500px;
    width:49.7%;
 float:right;
 margin-right:-50px;
 }
 
#right1{
 height:500px;
 background-color:#c96;
 margin-right:50px;
 
 border:1px red solid;
 
 }
</style>

左右动态，中间固定html部分代码

<body>
<div id="header"></div>
<div id="content">
<div id="left">
<div id="left1"></div>
</div>
<div id="cont"></div>
<div id="right">
<div id="right1"></div>
</div>
</div>
<div id="footer"></div>


</body>

左右固定，中间动态css部分代码

<style type="text/css">
#header,#content,#footer{
 background-color:#ccc;
 border:1px solid #0c0;
 height:30px;
 width:80%;
 margin:10px auto;
 }
#content{
  height:500px;
  }
#left{
   height:500px;
   width:100px;
   float:left;
  border:1px red solid;
   background-color: #C36;
   
   }
#center{
   width:99.2%;  
   height:500px;
   float:left;
   margin-left:-200px;
   
   }   
#center1{  
   height:500px;
   background-color:#090;
   margin-left:200px;

   }
#right{
      width:98px;
    height:500px;
    float:right;
   border:1px red solid;
    background-color:#c96;
    }

</style>

左右固定，中间动态html部分代码


<body>
<div id="header"></div>
<div id="content">
<div id="left"></div>
<div id="center">
<div id="center1"></div>
</div>
<div id="right"></div>

</div>
<div id="footer"></div>

</body>

转载于:https://www.cnblogs.com/yanzhuan/archive/2011/11/04/2235254.html

weixin_30376453
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css 表格的左右两列固定，中间内容可以左右滑动查看
qq_42486417的博客
09-11 5897
参考 fixed-table 插件写的，插件demo可以在https://www.lanrenzhijia.com/js/4694.html查看 我用html+css写了一个类似的，原理是写好一个完整表格之后，再写两个固定的列，将其覆盖在完整的表格之上，有弊端，一定要设置行高，否则中间内容换行之后，会比两边固定的列高 代码如下 <!DOCTYPE html> ...
动画 实现在固定区域内拖拽目标
qq_42666439的博客
09-01 104
#动画 拖拽 Document
左右固定，中间移动的效果
weixin_30311605的博客
05-31 86
在网上找了了好多的demo都不能用，最后去找我们公司的大神解决了。 要写这个你首先要知道两点， 1. .scroll() .scrollTop(); .scrollLeft()用法。这个可以看 w3s的。http://www.w3school.com.cn/jquery/event_scroll.asp 2.就是 获取 div 移动的距离 eg: $(".se").scr...
列表左边左右固定，右边可以左右滚动，且左右两边列表滚动时上下联动
weixin_30293079的博客
10-24 1209
function funcsrcoll1() { rightdiv.scrollTop = leftdiv.scrollTop;//设置左边的div和右边div上下滚动距离相同，即左右上下滚动联动。 } function funcsrcoll2() { leftdiv.scrollTop = rightdiv.scrollTop;//设置左边的div和右边div上下滚动距...
上下固定，中间滚动布局如何实现
jean_0920的博客
09-19 1817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
详解左右宽度固定中间自适应html布局解决方案
09-22
【详解左右宽度固定中间自适应HTML布局解决方案】 在网页设计中，经常遇到一种布局需求：左右两侧的元素宽度固定，而中间的元素则根据屏幕大小自适应调整宽度。这种布局方式能够灵活适应不同设备和屏幕尺寸，提升...
jQuery的左右侧边栏固定中间滚动代码.zip
07-11
一款在页面向下滚动时，可以将左侧或右侧侧边栏固定在页面中的jQuery网页左右侧边栏固定中间滚动代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready...
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css实现两栏固定中间自适应的方法
09-22
主要介绍了css实现两栏固定中间自适应的方法，主要介绍了4种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能...
html页面布局上下左固定-中间内容滚动显示-案例
JackieDYH的博客
07-22 884
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; background:
css 五种两边固定，中间自适应的实现方式
南北北南的博客
05-12 737
<!DOCTYPE html> <html> <head> <title>BFC</title> <style> body { overflow: scroll; } /* position:absolute */ .left, .right { position: absolute; width: 230px; top: 0; height: 50px.
四种方法实现两边固定，中间自适应布局(浮动 定位)
美果儿的博客
02-26 3506
只利用浮动 左右浮动&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;利用浮动实现两边固定中间自适应布局&lt;/title&gt;&lt;style&gt;html,body{height: 100%;margin: 0;min-width: 800p
上下固定，中间滚动布局
jean_0920的博客
09-19 1112
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
100款古风PPT (80).pptx
最新发布
07-13
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
多旋翼飞行器设计与控制理论 -第15讲_展望V2.pdf
07-13
多旋翼飞行器设计与控制理论 -第15讲_展望V2.pdf
光伏项目设备资产配置方式论证报告.doc
07-13
光伏项目设备资产配置方式论证报告.doc
1720843046670.png
07-13
1720843046670.png
CJ60Lib.dll
07-13
.................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
el-table 复杂表头如何左右固定中间滑动
05-26
以下是一个示例代码，展示了如何实现复杂表头的左右固定中间滑动功能： ```html :data="tableData" style="width: 100%;" :column-key="columnKey" :height="tableHeight" :header-cell-style="{padding: '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值