杰晶网络

负边距创建自适应宽度的流体布局的实现方法
网页制作 2024/11/23 佚名
3 2
国外关于使用负边距创建这类布局的技术文档，我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 （04年 - -！国内刚小部分人开始关注WEB标准化），本文亦可看做是对其的中文讲解版。

随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。目前国内门户很多都进行了改版，采用目前的主流———960px左右的宽度。

我认为，对于不太复杂的网站，采用百分比进行架构是个不错的主意。自适应布局的应用面还是蛮多的，比如论坛页面、博客页面等。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。

这里需要的用到的技术关键点就一则：负边距。

【简单的布局】

OK。我们现在开始。假设现在需要给自己的博客重新制作前台，界面的设计已经完成，就差代码架构。我们希望博客的界面可以做到：左侧的主要部分是博客文章 内容，这部分需要在不同分辨率浏览器下自适应宽度；而右侧是侧边栏，这部分我们想做成一个固定250px宽，预期效果图如下：

负边距创建自适应宽度的流体布局的实现方法

这是个典型的两栏布局，我们来做一个初步的架构
引用:
<div id=”header”>顶部区域</div>
<div id=”mainer”>
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
</div>
<div id=”sideBar”>
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div id=”footer”>底部区域</div>
查看测试页面一，这是在没有样式表的情况下页面的显示效果。下面我们给它加上基本的样式表

提示：您可以先修改部分代码再运行
引用:
body,p,h1,h2,ul {
margin:0;padding:0;
}
#header {
background-color: #A8A754;
}
#footer {
background-color: #A8A754;
clear: both;
}
#mainer {
width: 100%;
margin-right: -250px;
float: left;
}
#sideBar {
float: right;
width: 250px;
}
定义mainer右边距为-250px，使得右边得以空出侧边栏的宽度，放置侧边栏。加上样式表页面请查看测试页面二。OK，现在我们看到左侧的内容区域已经为侧边栏空出了相应的空间，使得侧边栏放置在了它应该出现的位置。

提示：您可以先修改部分代码再运行

【去除重叠部分】

我们这时会发现，左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个DIV层，来将左侧文字部分设置一个足够大的右边距，使其不与侧边栏重叠。并将左侧内容部分与侧边栏部分设置不同背景色，以示区分。
引用:
<div id=”mainer”>
<div id=”main”>
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
</div>
</div>
增加的CSS
引用:
#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}
查看

提示：您可以先修改部分代码再运行

【自适应高度】

这时候我们又发现了一个问题：如果左侧长度继续加长，那么，右侧侧边栏的下部会出现空白。我们希望可以实现视觉上的左右两栏自适应等高。

这里我们可以给外层的mainer DIV设置一个右对齐纵向重复的背静图片，图片的宽度我们设置为250px，即同侧边栏宽度相同。

负边距创建自适应宽度的流体布局的实现方法

CSS部分我们加上
引用:
#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}
多数时候我们并不想设置全部宽度为浏览器的宽度，多数时候我们会设置小于屏幕宽度的百分比。这种情况下，我们可以在左侧内容及右侧侧边栏外再套一个DIV层，并在侧边栏下加上一个清除浮动的层，来达到我们的目的。这个时候我们的XHTML会是下面这个样子。
引用:
    <div id=”header”>顶部区域</div>

    <div id=”wrapper” class=”mid”>
    <div id=”mainer”>
    <div id=”main”>
    <h1>使用负边距创建自适应宽度的流体布局</h1>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    </div>
    </div>

    <div id=”sideBar”>
    <h2>最新文章</h2>
    <ul>
    <li>最新文章一</li>
    <li>最新文章二</li>
    <li>最新文章三</li>
    </ul>
    </div>
    <div class=”clear”></div>
    </div>

    <div id=”footer”>底部区域</div>
相应的CSS
引用:
#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}
查看

提示：您可以先修改部分代码再运行

Ryan Brill 在他的文章里说，外层的wrapper与里面的mainer两个DIV都应该设置背景 background，以便解决IE里的一个BUG。但我这里只设置了mainer DIV的背景，在IE6、IE7、FF里并未发现错误。可能他指的是IE5.x，这里忽略。

【进阶，三栏布局】

掌握了以上的方法，我们会发现制作一个三栏的布局也是很简单的！OK。下面我们把上面的例子变下，我们需要一个三栏的布局，2侧为固定宽度，中部为自适应宽度。这仅需要增加一点DIV。
引用:
    <div id=”header” class=”mid”>顶部区域</div>

    <div id=”wrapper” class=”mid”>
    <div id=”mainer”>
    <div id=”main”>

    <div id=”leftBar”>
    <h2>栏目标题</h2>
    <ul>
    <li>文章标题</li>
    <li>文章标题</li>
    <li>文章标题</li>
    </ul>
    </div>

    <div id=”inmain”>
    <h1>使用负边距创建自适应宽度的流体布局</h1>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    </div>

    </div>
    </div>

    <div id=”sideBar”>
    <h2>最新文章</h2>
    <ul>
    <li>最新文章一</li>
    <li>最新文章二</li>
    <li>最新文章三</li>
    </ul>
    </div>
    <div class=”clear”> </div>
    </div>

    <div id=”footer” class=”mid”>底部区域</div>
以及另外一个背景图片

负边距创建自适应宽度的流体布局的实现方法

CSS部分增加：
引用:
#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}
现在来看看我们的页面。

提示：您可以先修改部分代码再运行
标签：
负边距,自适应宽度
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网