CSS两列与三列布局实战教程：自适应宽度与BFC方法

85 浏览量更新于2024-09-01 收藏 52KB PDF 举报

本文档详细介绍了如何使用CSS实现页面的两列布局与三列布局。首先，我们通过BFC（Block Formatting Context）的概念来构建三列布局。BFC允许我们创建独立于文档流的布局区域，通过浮动元素`<div class="left">`和`<div class="right">`分别占据左右两侧，并用`<div class="main">`作为中间栏，通过设置浮动、间距和`overflow:hidden`属性来确保布局的清晰。具体实现步骤如下： 1. 创建一个包含三个部分的HTML结构：左侧浮动div `.left`，宽度为100px，背景颜色为橙色；右侧浮动div `.right`，同样宽度为100px，背景颜色也为橙色；中间主要内容div `.main`，设置高度为100px，背景颜色为绿色，并且使用`overflow:hidden`隐藏溢出内容。 CSS代码中，`.left`和`.right`设置`float:left`和`float:right`来创建浮动效果，`margin-right`和`margin-left`用于控制元素间的间距。另一种常见的布局方式是双飞翼布局，由淘宝最早提出，主要目的是提高页面性能，让主列内容先加载。该布局使用wrap容器来包裹主要内容和两个子列，通过以下步骤实现： - 主内容`.main-content`左浮动，wrap容器`.wrap`设置宽度为100%。 - 子列`.left`和`.right`分别添加，它们也左浮动，同时`.main-content`的`margin-left`设置为负值，使得子列紧贴在主列两侧。 - 调整子列的负`margin`值和主列的`margin`值，以控制两列与主列之间的间隙。这两种方法都是CSS基础布局技术的重要应用，对于理解和实现响应式设计中的多栏布局非常有帮助。通过灵活运用这些技巧，开发者可以轻松地根据屏幕尺寸调整网页布局，提升用户体验。

CSS实现页面两列布局与三列布局的方法示例实现页面两列布局与三列布局的方法示例

主要介绍了CSS实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考

下

1. 使用使用BFC的原理实现的原理实现

BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。

html代码如下

XML/HTML Code复制内容到剪贴板

1. <div class="left"></div>

2. <div class="right"></div>

3. <div class="main"></div>

css代码如下

CSS Code复制内容到剪贴板

1. .left {

2. float: left;

3. margin-right: 10px;

4. width: 100px;

5. height: 100px;

6. background-color: orange;

7. }

8. .rightright {

9. float: rightright;

10. margin-left: 10px;

11. width: 100px;

12. height: 100px;

13. background-color: orange;

14. }

15. .main {

16. height: 100px;

17. background-color: green;

18. overflow: hidden;

19. }

2.双飞翼布局双飞翼布局

这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。

实现原理：

（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。

（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。

（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。

html代码如下

XML/HTML Code复制内容到剪贴板

1. <div class="wrap">

2. <div class="main-content">

3. <div class="main"></div>

4. </div>

5. <div class="left"></div>

6. <div class="right"></div>

7. </div>

css代码如下

CSS Code复制内容到剪贴板

1. .wrap {

2. width: 100%;

3. }

4. .wrap::after {

5. display: block;

6. content: '';

7. font-size: 0;

8. height: 0;

9. clear: both;

10. zoom: 1;

11. }

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38738189

粉丝: 5
资源: 954

CSS两列与三列布局实战教程：自适应宽度与BFC方法

DIV+CSS 三栏布局实例代码

DIV＋CSS＋HTML布局（三行两列布局）

在简单的语义化标签分块页面基础上用CSS定位实现两列布局的页面

css 网格布局 两列

css怎么让两列排布一列固定一列自适应

css瀑布流布局两列

css 使用flex布局评分两列

web期末作业javascript、jQuery,Bootstrap布局主要采用DIV+CSS设计,采用浮动布局、定位布局或弹性盒布局代码实现

python编写网页并附带多个图片界面，其中页面左右两列图片，每列有三张，页面中央的图片最大

微信小程序实现两列瀑布流代码示例

最新资源

css 网格布局两列