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

最新推荐文章于 2023-04-20 17:53:39 发布
最新推荐文章于 2023-04-20 17:53:39 发布
阅读量91 收藏
点赞数
原文链接：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布局解决方案
09-22
主要介绍了详解左右宽度固定中间自适应html布局解决方案的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
左右固定，中间移动的效果
weixin_30311605的博客
05-31 84
在网上找了了好多的demo都不能用，最后去找我们公司的大神解决了。 要写这个你首先要知道两点， 1. .scroll() .scrollTop(); .scrollLeft()用法。这个可以看 w3s的。http://www.w3school.com.cn/jquery/event_scroll.asp 2.就是 获取 div 移动的距离 eg: $(".se").scr...
css 五种两边固定，中间自适应的实现方式
南北北南的博客
05-12 731
<!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 3495
只利用浮动 左右浮动&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
CSS三栏布局——中间固定两边自适应宽度
祥哥的说
07-27 2163
CSS三栏布局——中间固定两边自适应宽度 今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着与大家一起测试，还是通过了各浏览器的考验，为了方便自己以后好查阅，也想让不知道的朋友一起学习一...
vue flex布局 左右内容宽度固定 中间自适应
细节怪的博客
04-20 1334
flex布局，左右内容宽度固定，中间内容自适应
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
下面和大家一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用
C++queue介绍及详细使用示例（源代码）
最新发布
05-23
deque（双端队列）是C++标准模板库（STL）中的一个容器，它支持在序列的两端（前端和后端）快速插入和删除元素。deque 通常在需要快速地在两端添加或移除元素，但又不想承受像 list 那样的额外开销时使用。 deque的主要特性： 双端操作：deque 允许在序列的前端和后端快速插入和删除元素。 内部引用：deque 通常不会将所有元素都存储在连续的内存块中，而是将元素存储在多个较小的、独立的内存块中，并通过内部引用机制来管理这些内存块。这使得 deque 在进行前端插入和删除操作时比 vector 更高效，因为 vector 在这些操作时需要移动所有元素。 迭代器：deque 支持双向迭代器，可以向前或向后遍历元素。 随机访问：尽管 deque 的元素不是连续存储的，但它仍然支持通过索引直接访问元素（类似于 vector）。
实验报告3.doc
05-23
实验报告3.doc
（基于Golang 1.18简单封装的Gorm分页插件）.zip
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
一个基于springboot+sureness的面向REST API资源无状态认证权限管理系统
05-23
一个基于springboot+sureness的面向REST API资源无状态认证权限管理系统。个人经导师指导并认可通过的高分大作业设计项目，适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 一个基于springboot+sureness的面向REST API资源无状态认证权限管理系统。个人经导师指导并认可通过的高分大作业设计项目，适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 一个基于springboot+sureness的面向REST API资源无状态认证权限管理系统。个人经导师指导并认可通过的高分大作业设计项目，适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。
C实验报告模板.doc
05-23
C实验报告模板.doc
autojs1-仿真随机滑动.js
05-23
模拟滑动抢单，防检测，模拟人手的随机滑动，外卖抢单，美团，大麦
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、付费专栏及课程。

余额充值