CSS 常见两列布局、三列布局

一、两列布局:

 方法一:采用position:absollute;并设置margin-left的值。

#left{
    position:absolute;
    width:300px;
    top:0px;
    left:0px;
    background:#F00;
}

#right{
    background:#0FC;
    margin-left:300px;
}
<div id="left">左边定宽</div> <div id="right">右边自适应</div>

方法二:采用float;并设置overflow:auto;(隐藏溢出的内容) 

#left {
    float: left;
    width: 300px;
    background-color: blue;
}
#right {
    overflow: auto;
    background-color: red;
}

<div id="left">左边自适应</div>
<div id="right">右边定宽</div>

方法三:使用flex布局的写法

.content{
    display:flex;
}
.aside.left{
    border:5px solid black;
    width:200px;
}
.aside.main{
    flex-grow:1;
    border:5px solid red;
}
.aside {
    height:600px;
}
<div class="content">
    <div class="aside left"></div>
    <div class="aside main"></div>
</div>

二、三列布局

方法一:与两列布局类似,左右两边设置position:absolute;和top:0;left:0;right:0;

中间设置margin-left和margin-right即可.

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    position:absolute;
    width: 300px;
    top:0;
    background-color: #0FC;
}
#left{
    left:0;
}
#right{
    right:0;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左边定宽</div>
<div id="main">中间自适应</div>
<div id="right">右边定宽</div>

方法二:左右采用float,中间设置 overflow:auto;和margin:0 300px;

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    float:left;
    width: 300px;
    background-color: #0FC;
}
#right{
    overflow:auto;
    float:right;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左边定宽</div>
<div id="right">右边定宽</div>
<div id="main">中间自适应</div>

方法三:使用flex布局的写法

.content{
    display:flex;
}
.aside.left{
    order:1;
    border:5px solid black;
    width:200px;
}
.aside.left{
    order:3;
    border:5px solid black;
    width:200px;
}
.aside.main{
    order:2;
    flex-grow:1;
    border:5px solid red;
}
.aside {
    height:600px;
}
<div class="content">
    <div class="aside left"></div>
    <div class="aside right"></div>
    <div class="aside main"></div>
</div>

原文地址:https://www.cnblogs.com/hongchenzimo/p/11026429.html

时间: 2024-10-11 16:13:04

CSS 常见两列布局、三列布局的相关文章

HTML+CSS的两栏、三栏布局以及垂直居中的实现方式

1.两栏布局(左固定,右适应) 先写出初始样式和结构. <div class="container"> <div class="left">Lorem ipsum dolor sit amet</div> <div class="right">Lorem ipsum dolor sit amet</div> </div> div { height: 200px; color:

web标准(复习)--3 二列和三列布局

今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现.首先创建html代码如下: <style>#side { background-color:#99F

第三天 二列和三列布局

http://www.aa25.cn/div_css/904.shtml 今天学习<十天学会web标准(div+css)>的二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度 下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助c

css自适应布局(两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应)

1.两列自适应 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css" media="screen"> #left{float: left;background: #ccc;height: 40

简单的CSS网页布局--三列布局

三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三列自适应</title> 6 <style type="text/

CSS总结(七)——常见的两栏、三栏布局

一.两栏布局 — 左栏固定宽度,右栏宽度自适应 1. 左浮动+margin <div class=“left”></div> <div class=“main”></div> css:  .left{width:200px;float:left;} .main{margin-left:200px;} ps:    IE6中可能出现双margin的bug,可以通过display:inline来解决 2.  绝对定位 + margin-left (兼容性好) &

Web标准:三、二列和三列布局

知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽度居中 9.IE6的3像素bug 1)二列自适应宽度 div为块级元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,需要做css的浮动来实现. 在#side里面加上float:left;即可 说明:当我们不加float时,可以看到div占据的是一行 但是如果加了float:left后,可以

CSS布局-三栏布局,左右宽度300px,中间自适应

tips: css中“>”是: css3特有的选择器,A>B 表示选择A元素的所有子B元素. 与A B的区别在于,A B选择所有后代元素,而A>B只选择一代.  .a,.b{逗号指相同的css样式}:.a .b{空格指后代元素}:.a>.b{大于号指子代元素}: 一.浮动解决方案 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q

关于页面的多种自适应布局——三列布局

简单结构1,列表在前,更多列表在中间,内容在后 1 <style type="text/css"> 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;} 3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;