一共有10列，固定左四列

时间: 2024-10-18 22:22:20 浏览: 11

横向两列布局（左列固定，右列自适应）的4种CSS实现方式

在网页设计中，横向两列布局是一种常见的布局方式，它能有效地组织内容，通常用于创建具有侧边栏和主要内容区域的页面。在这种布局中，左列通常用来展示导航、广告或者辅助信息，而右列则根据浏览器窗口大小自适应填充剩余空间。本文将详细介绍四种CSS方法来实现这种布局，即左列固定宽度，右列自适应宽度。 1. **使用绝对定位（Absolute Positioning）** 这种方法是通过设置`.side`为绝对定位，使其固定在左侧，然后设置`.main`的左边距（`margin-left`）为`.side`的宽度加一个边界值，以确保主栏位于侧栏右侧。这种方法简单且直观，但当内容超过侧栏高度时，可能需要额外的CSS来处理滚动条和内容溢出。 CSS代码： ```css .side { position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: red; } .main { margin-left: 210px; background: blue; height: 200px; } ``` 2. **使用浮动（Float）** 第二种方法是将侧栏设置为浮动元素，使用`float: left`，然后设置主栏的左边距（`margin-left`）为侧栏的宽度，以达到同样的效果。这种方法在旧版浏览器中兼容性较好，但可能需要清理浮动（clear floats）以防止对其他元素的影响。 CSS代码： ```css .side { width: 200px; height: 200px; float: left; background: red; } .main { height: 200px; margin-left: 210px; background: blue; } ``` 3. **使用Flex布局（Flexbox）** Flex布局是现代CSS布局的标准，可以轻松地实现这种布局。将父容器`.parent`设置为`display: flex`，然后为`.side`设置固定宽度，为主栏`.main`设置`flex: 1`，这样主栏将自动占据剩余空间。 CSS代码： ```css .parent { display: flex; } .side { width: 200px; height: 200px; background: red; margin-right: 10px; /* 添加间距 */ } .main { background: blue; height: 200px; flex: 1; } ``` 4. **利用BFC（Block Formatting Contexts）** BFC是CSS布局中的一个概念，它可以防止浮动元素影响其内部内容。通过将主栏设置为一个BFC，可以避免它与浮动的侧栏重叠。这可以通过设置`.main`的`overflow`属性为非`visible`值（如`auto`或`hidden`）来实现。 CSS代码： ```css .side { width: 200px; height: 200px; float: left; background: red; } .main { overflow: auto; /* 创建BFC */ background: blue; height: 200px; } ``` 每种方法都有其适用场景和优缺点。绝对定位适用于简单布局，但可能在内容溢出时需要额外处理；浮动布局兼容性好，但可能需要清理浮动；Flex布局是现代布局的最佳选择，但老式浏览器可能不支持；BFC方法在处理浮动元素时很有用，但可能引入不必要的滚动条。在实际应用中，开发者应根据项目需求和目标浏览器支持情况来选择最适合的布局方式。

如果你需要在HTML中创建一个有10列并且左边固定4列的布局，可以使用类似于之前的flex布局，但是这里我们需要为剩下的六列分配空间。假设最右边的一列是变动的，其余固定列的宽度可以直接设定。以下是示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; flex-wrap: wrap; /* 让行可以换行 */ gap: 10px; } .fixed-columns { /* 固定的四列 */ display: flex; flex-direction: column; /* 列方向 */ } .fixed-left { width: 33%; /* 每个固定列宽度占总宽度的1/3 */ background-color: #f2f2f2; } .variable-column { /* 变动的六列 */ width: calc(100% - 120px); /* 120px为四个固定列的总宽度 */ background-color: #ffffff; } </style> </head> <body> <div class="container"> <div class="fixed-columns"> <div class="fixed-left" style="height: 100%;">第一列</div> <div class="fixed-left" style="height: 100%;">第二列</div> <div class="fixed-left" style="height: 100%;">第三列</div> <div class="fixed-left" style="height: 100%;">第四列</div> </div> <div class="variable-column">第六列开始</div>  </div> </body> </html> ``` 这个例子中，`fixed-left`类代表固定的四列，每个占总宽度的1/3。`variable-column`类负责剩余的六列，其宽度计算为总宽度减去固定列的宽度。

阅读全文

一共有10列，固定左四列

相关推荐

android 仿股票 固定左边列可上下左右滑动

利用纯css实现table固定列与表头中间横向滚动的思路和实例

ng-cells实现固定左侧列的滚动表格应用

用table写一个左侧固定三列，表头固定的多行表格

bootstrape table 固定左边栏

左侧固定企业网站模板

CSS网页布局入门教程3：一列固定宽度居中

javascript经典特效---固定的左侧导航菜单.rar

自由调整表格列宽和固定标题及首列

js浮动层制作在线客服float浮动层固定在浏览器左侧

win10系统如何把文件夹固定到任务栏？.docx

全屏响应式摄影商务网站模板-左栏固定版式

overflow-x:scroll 设置部分列固定

html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...

yolov10预训练模型.rar

最新推荐

利用纯css实现table固定列与表头中间横向滚动的思路和实例

yolov10预训练模型.rar

探索AVL树算法：以Faculdade Senac Porto Alegre实践为例

管理建模和仿真的文件

【ggplot2绘图技巧】：R语言中的数据可视化艺术

HAL库怎样将ADC两个通道的电压结果输出到OLED上？

小学语文教学新工具：创新黑板设计解析

"互动学习：行动中的多样性与论文攻读经历"

【R语言并行计算秘籍】：倍增数据处理速度的高效策略

如何用C语言编程精确计算级数1 - 1/11 + 1/21 - 1/3! + ...（直到最后一项的绝对值小于1E-4）并求得e的近似值？

android 仿股票固定左边列可上下左右滑动