现在先来谈谈关于三行两列的布局［左栏固定，右栏自适应宽度］之一，我能想到比较好的办法是使用margin漂浮法。
先说说要做成这件事，要做些什么，会碰到些什么问题。要让右栏自适应宽度，也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某个位置，而且宽度固定呢？很简单，只需要右栏从自身宽度里让出一些给左栏就行了，也就是预留出leftMargin，而右栏仍保持原来的性能自适应。现在就是如何让左栏固定在左边的问题了。大家都知道，让某块居左或居右可以通过float来解决，只需要选择其值为left或right，让该块浮动在某个位置就OK。
［演示地址：http://pysj.v-ec.com/model/xhtmlcss/layout/layout1.htm］
CSS部分：
body {
font-family: Verdana, Arial;
font-size: 12px;
margin: 0;
}
#dyhead {
margin-bottom: 5px;
}
#dyleft {
width: 200px;
float: left;
}
#dyright {
margin-left: 210px;
}
#dyfoot {
margin-top: 5px;
clear: both;
}
div {
color: #363636;
background-color: #eee;
border: 1px dashed #630;
}
以上的样式中，body没什么说，基本的一些定义；div总体的定义了一下所有div的背景色及边框样式；#dyhead定义头部以5px的间距和下面的内容分开；#dyfoot则和#dyhead相反，以5px的间距和上面的内容分开，只不过这里多用了一个clear，用于清除上面内容中使用float的影响；#dyleft定义了自身的宽，而且定义了float为left，就是为了使自己始终浮在左边；#dyright一目了然，margin-left为左栏预留了210px的空间，反观#dyleft只用了200px定义自身，剩下的10px自然就成了两栏之间的间距了。
HTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css Layout</title>
</head>
<body>
<div id="dyhead">头部</div>
<div id="dyleft">左栏固定<br />宽度为200px</div>
<div id="dyright">右栏宽度自适应</div>
<div id="dyfoot">底部</div>
</body>
</html>
以上就是使用margin漂浮法作出的［左栏固定，右栏自适应宽度］布局，为了区分开左右的位置，我预留了两栏之间的间隔为10px，当然这在真正做web的时候为了美观也是要的。在效果演示页面能看到，或者直接把以上代码拷到本地也行。整个布局十分简单，思路也比较清晰，希望有更好意见的朋友多多交流。
*题外话：其实这个布局不需要用到margin漂浮，一样能很简单的实现。步骤：左栏依然如此，右栏不需要任何设定，效果依然为“左栏固定，右栏自适应宽度”。只是考虑到后面更复杂的东西，这样的表现会不大完美。就如，要清晰分开两栏就不易。』
分享到：
相关推荐
CSS两列布局是指在一个容器中，左侧和右侧各占据一部分的空间，左右两侧的宽度可以是固定的，也可以是一侧固定另一侧自适应宽度。下面是CSS两列布局的示例代码： ```html <div style="width:90%; margin:0 auto;"> ...
1. 创建一个两列布局，左侧固定宽度，右侧自适应宽度。 2. 实现一个响应式布局，根据屏幕宽度自动调整元素的排列方式。 3. 使用Flexbox或Grid创建一个带有头、脚和侧栏的多部分布局。 4. 探索CSS变量、媒体查询等...
三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。 同样的道理，更多列的布局，其实和两列、三列的...
- 为了使两列固定宽度的布局居中，需要添加一个包含这两列的父级`div`（如`content`），并设置其宽度为两列宽度之和，然后通过`margin: 0 auto;`实现水平居中。 4. **三列布局**： - 三列布局可以分为自适应宽度...
在网页设计领域，`DIV+CSS`布局是构建网页...这个压缩包中的练习可能包括创建各种布局示例，如两列布局、三列布局、头部导航、页脚布局等，通过这些实例，学习者可以深入理解`DIV+CSS`布局的工作原理，并提高实践能力。
在网页设计领域，Div+CSS是构建网页布局的主流技术之一。Div（Division）是HTML中的一个块级元素，常用于组织和分隔页面内容，而CSS（Cascading Style Sheets）则是用来控制网页样式和布局的重要工具。本篇文章将...
6. 两列右列宽度自适应：左侧列固定，右侧列自适应。 7. 两列固定宽度居中：两个并排`<div>`居中，保持固定宽度。 8. 三列浮动布局：三列通过`float`属性排列，中间列宽度自适应。 CSS+DIV布局允许设计者将内容和...
接下来是三行两列布局。此布局在顶部(top)层中包含两个子层：banner和links。中间(middle)层则分为左(leftbar)和右(rightbar)两个部分。HTML代码中，每个子层都用`<div>`元素表示，并赋予相应的`id`。CSS部分则定义...
9. 实战应用：书中可能包含多个实例，如创建两列布局、三列布局、瀑布流布局等，帮助读者将理论知识转化为实际操作。 通过学习《Div+CSS布局大全》，开发者不仅能掌握网页布局的基本原理，还能提升解决实际问题的...
2. 块级元素与行内元素：Div作为一个块级元素，自然换行并独占一行，可调整宽度、高度等属性，适合用于构建布局框架。 3. 盒模型：每个Div都是一个盒子，包含内容、内边距、边框和外边距，理解盒模型对于布局至关...
1. 流动布局案例：一个常见的流动布局是两列布局，左右两侧各有一个固定宽度的侧栏和一个自适应宽度的主内容区域。 2. 定位布局案例：创建一个固定在屏幕底部的导航栏，可以使用`position: fixed`和`bottom: 0`属性...
Bootstrap栅格系统是一种基于12列的响应式布局框架，旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的...
Bootstrap的基础布局系统依赖于网格（Grid System），它将页面宽度划分为12列，允许灵活的栅格布局。通过类`.container`、`.container-fluid`定义容器，再利用`.row`类来组织行，并在行内嵌套`.col-*-*`类的列，可以...
首先，两列定宽加一列自适应布局常用于需要一边保持固定宽度，另一边根据内容自动扩展的情况。例如，左侧栏可能包含导航或侧边栏，其宽度固定，而右侧主内容区域则根据内容的多少动态调整宽度。实现这种布局通常使用...
3.6 两列右列宽度自适应 3.7 二列固定宽度居中 3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin...
`display: block`和`display: inline-block`常用于简单的两列或三列布局，而`display: flex`和`display: grid`则更适用于复杂的多列布局，它们提供了更强大的对齐和分布控制。 【标签】：“源码”意味着我们将探讨...
例如，一个四列的布局可以由`.col-4`类定义，这样每个单元格将占据总宽度的三分之一。这种布局方式易于理解和使用，同时支持响应式设计，确保在不同设备上都能呈现良好的视觉效果。 ### 3. 响应式设计 Grd框架的...
- 对于希望完全自适应的布局，可以使用 `layui-fluid` 类，它会使内容宽度为100%，根据屏幕大小自动调整。 2. **行（layui-row）** - 在内容区域添加 `layui-row` 类，定义一行的开始。这一类是创建等分列的基础...