HTML页面分两栏，左右栏个自适应相…

最新推荐文章于 2023-12-12 16:57:19 发布
最新推荐文章于 2023-12-12 16:57:19 发布
阅读量1.1w 收藏 2
点赞数
分类专栏： 网页制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloliuhai/article/details/14126675
版权

HTML页面分两栏，左右栏个自适应相邻的高度(兼容IE6.7.8.火狐)。（左栏的高度增加，右栏自动增加高度。右栏高度增加，左栏自动增加高度）

直接看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML页面分两栏，左右栏个自适应相邻的高度(兼容各浏览器)  </title>
<style type="text/css">
<!--
.clear{clear:both;width:0px;height:0px;overflow:hidden;}
.w{ width:960px; margin:0px auto; background-color:#0F91CF; position:relative; overflow: hidden; }
.w .l-r{ width:960px; background-color:#F00; position:relative; right:300px; }
.w .l-r .l{width:650px;padding-right:10px;float:left;position:relative;left:300px;}
.w .l-r .r{width:300px;float:left;position:relative;left:300px;}
-->
</style>
</head>

<body>


<div class="w">
    <div class="l-r">
        <div class="l">
            1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
        </div>
        <div class="r">
            2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />
        </div>
        <div class="clear"></div>
    </div>
</div>


</body>
</html>

hello刘海
关注
专栏目录
用css实现三栏布局，要求左右定宽，中间自适应
weixin_39963132的博客
12-30 2113
面试的时候经常会被问到这个题目，以及我们在平常做界面的时候也会遇到这种三栏布局的要求，那么如何实现呢？其实网上有很多方法，但还是跟着我的例子敲一遍代码吧，这样自己才能知道原理是什么，也有助于理解。 一、圣杯布局（让left和right占据container的padding） html界面：分别是左中右的三个div &lt;div class="container"&gt; &...
一个简单的HTML网页 个人网站设计与实现 HTML+CSS+JavaScript自适应个人相册展示留言博客模板
专注于dreamweaver网页设计制作
08-12 276
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大......
html页面分栏显示
11-16
采用非iframe形式，实现页面分栏效果
两栏布局，左侧固定宽度，右侧自适应大小
青天诀的专栏
05-31 8441
html代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS布局</title> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>第一种方式*{margin:0;
设置两栏自适应的方法
jiabin_xu的博客
07-01 344
设置两栏自适应的方法 1. 浮动 + overflow: hidden 一侧固定宽度，然后浮动；另一侧设置 overflow: hidden &lt;style&gt; .div1 { width: 100px; height: 100px; float: left; background: red; } .div2 { height: 500px; ov...
html实现两栏布局
pspxuan的博客
10-06 3511
css代码 html,body{ height: 100%; margin: 0; overflow-y: hidden; } .left{ position: absolute; left: 0; right: 0; width: 300px; height: 100%; background: red; } .right{ height: 100%; ...
如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
csl125的博客
04-23 525
一、背景 在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 PS: 文末有彩蛋 两栏布局 两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如Ant Design文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器 ❝ 这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器 ❞ 这种布局适用于内容上具有明显主次关系的网页 三栏布局 三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两...
html两栏 自适应布局,CSS 实现：两栏布局（一边固定，一边自适应）
weixin_39568659的博客
06-16 638
☊【实现要求】：CSS实现左边固定，右边自适应父容器宽度的两栏布局。√【实现】：// html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式(margin:0; padding:0)html,body {/*width: 100%;*/height: 100%; // html,body 默认高度为 0margin: 0;padding: 0;}.left {widt...
CSS左右两列自适应高布局示例代码
09-25
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
三栏布局--左右宽度固定，中间自适应宽度
12-25
### 三栏布局——左右宽度固定，中间自适应宽度 在网页设计中，三栏布局是一种常见的布局方式，尤其适用于需要展示多部分信息且结构清晰的页面。这种布局的特点是左边栏和右边栏的宽度固定不变，而中间的主体内容...
Css左右定宽三栏布局.zip
08-04
"Css左右定宽三栏布局"是一种常见的网页设计模式，它旨在创建一个包含三个区域的页面，其中左右两栏宽度固定，中间栏宽度自适应，以满足不同内容需求和屏幕尺寸。这种布局常用于网站的主内容区，为用户提供清晰的...
HTML之基本布局设计之三栏式、两栏式设计
WillWinwin
11-21 9531
本文主要介绍的是如何构建布局，主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id等众多html的常用元素，接下来就直接上代码吧~ 三栏式 HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>This is my
分栏
weixin_30505043的博客
01-02 191
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分栏</title> 6 <style type="text/css"> 7 p{ 8 ...
html左右分页【搬代码】
最新发布
weixin_52001174的博客
12-12 1117
html左右分页
HTML完整格式–什么是HTML完整格式？
culing2941的博客
09-15 829
HTML full form is Hyper Text Markup Language. HTML is used to describe structure of web pages. HTML完整格式是超文本标记语言 。 HTML用于描述网页的结构。 HTML was developed by Tim Berners-Lee in the late 1991. It was releas...
HTML-CSS（五十一）column分栏布局
weixin_44730244的博客
05-05 1389
column-count：number; 分栏个数 column-width：number px; 分栏宽度 column-gap: number px ; 分栏的间距 column-rule: numberpx(宽度) color（颜色） 边线形状（与border设置边框一样） column-span：all/默认不写；合并分栏（独占一行，在需要独占一行的元素上引用该属性） 注意：当我们设置分栏的宽度和个数时，它们之间是有冲突的。要么你就写分栏的个数，要么就写分栏的宽度 <!DOCTYPE
html自适应分栏,六种自适应两栏布局方式
weixin_39995297的博客
07-03 1545
html结构方法一：flex布局.wrapper{display:flex;}.left{width:200px;height:400px;background:black;}.right{flex:1;height:400px;background:red;}方法二：浮动.left{float:left;width:200px;height:400px;background:black;}.ri...
HTML怎么把文字分栏_一篇文章教会你使用html+css3制作炫酷效果
weixin_39633134的博客
10-21 628
点击上方“IT共享之家”，进行关注回复“资料”可获赠Python学习福利【一、项目背景】 在浏览一些网站的时候，经常会看到很多的炫酷的效果去装饰页面，使它看起来更高端大气一些。比如，艺龙就采用了图片上加载文字，点击图片使把对应的图片放大，使用户清晰，直观的看到内容。这种效果该怎么做呢？今天教大家用简单的html+css3结合制作艺龙的页面效果。【二、项目准备】1、图片：新建...
自适应两栏底部对齐
weixin_30322405的博客
12-26 192
试用场景： 　　2列布局，左侧单张大图，右侧内容不限 　　左侧图片max-width:100%; height: auto; 　　右侧内容最外层div设置position:relative; height:0; padding-bottom: (高px值/宽px值)*100%; <style> *{margin: 0; padding:0;} body{...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值