实现一个三栏布局的网页，中间部分要自适应宽度并且优先加载，兼容IE&FF&Chrome。

最新推荐文章于 2021-08-04 20:16:30 发布
最新推荐文章于 2021-08-04 20:16:30 发布
阅读量1.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Whisper_a/article/details/29262843
版权

<!DOCTYPE html>

<html>

        <head>

                <style type="text/css">

                        body

                        {

                                /*在IE6中，#left{margin-left:-100%;}中的100%是整个可见区域的（包含body的margin），

                                这样就会比我们预期的多偏移一些*/

                                margin:0px;

                        }

                        #box

                        {

                                width:100%;

                                float:left;

                        }

                        #middle

                        {

                                height:100px;

                                margin:0 300px;

                                background-color:red;

                        }

                        #left

                        {

                                height:100px;

                                width:200px;

                                float:left;

                                margin-left:-100%;

                                position:relative;

                                left:100px;

                                background-color:green;

                        }

                        #right

                        {

                                height:100px;

                                width:200px;

                                float:left;

                                margin-left:-300px;

                                background-color:blue;

                        }

                </style>

        </head>

        <body>

                <!--优先加载中间部分，后加载两侧-->

                <div id="box">

                        <div id="middle"></div>

                </div>

                <div id="left"></div>

                <div id="right"></div>

        </body>

</html>

附注：

1. 在任何浏览器中，body都会自动设置一个非零的margin值，我们可以通过CSS将其置为（body{margin:0px;}）。

2. 本代码在IE6~9、FF及Chrome下测试通过。

Whisper_a
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
左右固定，中间自适应布局（方法5以后进阶，实现中间栏优先加载）
_
11-27 1058
html代码： 左边栏 右边栏 主内容 方法一：利用绝对定位方法(不推荐) css部分： body {margin: 0;padding: 0; height: 100%;} #left,#right {position: absolute; top:0; width: 220px; height: 100%;background:pink;} #left {left: 0;}
三栏布局-两边固定，中间自适应，中间层优先显示
weixin_30906671的博客
11-23 89
<!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 h...
三列布局，中间栏先加载如何实现呢？
weixin_38245489的博客
06-01 1288
&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;    &lt;title&gt;自适应宽度，左右两栏固定宽度，中间栏优先加载&lt;/title&gt;    &lt;s
五种方式实现三栏布局，左右固定中间自适应。
weixin_44954059的博客
04-27 441
1.浮动 2.定位 3.flex 4.圣杯布局 5.双飞翼布局 1.浮动： ！注意，要把middle放在最后 <style> body { margin: 0; padding: 0; } .container { width: 100%; height: 200px; } .left { width: 300px; height: 200px; background
三栏布局的两边定宽100px，中间自适应
qian_an_hua_li的博客
03-19 732
1.绝对定位，将左边定位，右边定位，将中间margin-left和margin-right设为100px缺点是当浏览器缩小时，两边可能会重叠。 2.float:left,float:right; 3.margin负值法：margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。 margin-left:-100%;margin-right:-100px;中间栏被宽度为100%的浮
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码
11-20
在CSS布局设计中，创建一个三栏式布局并让中间一栏自适应宽度，并随着文字内容的多少自动调整，是一项常见的需求。这个问题在百度面试中被提及，要求中间的紫色栏（在这里用`.name`类表示）根据文字的大小变化其宽度...
CSS网页布局入门教程8：三列浮动中间列宽度自适应
10-30
本篇教程为我们提供了一个使用CSS实现三列浮动中间列宽度自适应的网页布局的示例代码和实践经验，帮助我们更好地理解和掌握网页布局的技术和原理。同时，通过学习这些技术和原理，我们可以更好地设计和开发网页，...
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
实现一个三栏布局，中间板块自适应
来啦(#^.^#)
09-16 306
实现三栏布局，左右宽度300px，中间一栏宽度自适应 有5种方案： 浮动布局（兼容性较好但浮动元素脱离文档流） 绝对定位（元素脱离文档流使得下面的元素也会脱离文档流，使得可用性较差） flexbox（对ie8以下浏览器不兼容） 表格布局（虽然用得少来但兼容性好，可代替flex解决兼容性问题） 网格布局（兼容性不太好） 代码： <!DOCTYPE> <html&gt...
三栏布局--左右宽度固定，中间自适应宽度
12-25
　　三栏布局“左右宽度固定，中间自适应宽度” 　　方法1、设置浮动，使文档脱离文档流，注意层的顺序 方法2、同样通过负边距来实现，缺点是需要另外增加一个层 方法3、也可以通过绝对定位来实现
百度前端学院任务三——三栏式布局（中间宽度自适应）
sunyueru的博客
07-11 452
前言：最近在写百度前端学院的题目，打算这个星期快速得把第一阶段的任务过一遍。三栏式布局可以有两种写法，用float或者用position 方法一：使用float属性<div id="content"> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </div>注意：m
如何实现：左右固定，中间自适应布局，中间栏优先加载？
weixin_30634661的博客
04-01 190
1 html代码： 2 3 <div id="left">左边栏</div> 4 <div id="right">右边栏</div> 5 <div id="main">主内容</div> 6 7 方法一：利用绝对定位方法(不推荐) 8 9 css部分： 10 ...
三栏布局中间栏宽度自适应的实现方法
weixin_30701521的博客
01-19 108
1.绝对定位法 【注】另外，height：100%是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度（height：auto是指根据块内内容自动调节高度。） <!--三个div顺序任意--> <!doctype html> <html> <head> <title>绝对定位法&lt...
三种实现左右固定，中间自适应的三栏布局方式
aa110412的博客
03-23 310
目前为止，我所熟知的左中右三栏宽度自适应于浏览器的方法有三个：绝对定位法，margin负值法以及自身浮动法。这些方法简洁实用，且无兼容性问题。 一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 首先需要三个div，将左右两边的div的position设置为absolute，左右设置为相...
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
g291976422的博客
03-20 936
前端常问的面试题，题目：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。 下面提供这道题的五种解决方案： 首先要写好整个页面的布局（初始化等） <style> html * { padding: 0; margin: 0; } .layout { ...
CSS实现三栏布局，左右宽度固定，中间宽度自适应
Haley_Guo的博客
08-02 481
假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。 首先要写好整个页面的布局： &lt;style&gt; html * { padding: 0; margin: 0; } .layout { margin-top: 20px; }...
中间部分自适应宽度并且优先加载的三栏布局
kiscon的博客
06-05 886
背景 在笔试题中，会经常遇到实现一个三栏布局，下面用代码实现一个中间部分要自适应宽度并且优先加载，左边宽100px；右边栏宽160px的三栏布局 float布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三栏布局--float形式</title> </head> <style> .box{ flo
CSS三栏布局（左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局）
大叔学前端的博客
08-04 294
自己在做一个后台管理系统，没有美工，就自己用CSS简单搞一个三栏布局的页面。 左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局。 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS三栏布局、左右两栏固定宽度</title> <style type="text/css">* {
用html和css写一个三栏布局，要求左右宽度固定中间自适应。
最新发布
08-10
要实现一个左右宽度固定中间自适应的三栏布局，可以使用HTML和CSS进行编写。 首先，在HTML中，我们可以使用```<div>```标签来创建三个元素，分别代表左栏、中栏和右栏。例如： ``` 左栏内容 中栏内容 右栏内容 ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值