如何实现两、三栏布局？

最新推荐文章于 2025-02-02 18:04:05 发布

转载最新推荐文章于 2025-02-02 18:04:05 发布 · 248 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/crystal6918/article/details/55224670?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_

文章标签：

#定位 #html #css #flex #css3

css3 专栏收录该内容

18 篇文章

订阅专栏

两栏布局

方法一：浮动布局

<style>
div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
}
#main{
  background-color:aqua;
  margin-left:300px;
}
</style>

<body>
	<div id = "aside">
	</div>
	<div id = "main">
	</div>
</body>

左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。
在这里插入图片描述
右侧固定宽度，左侧自适应则是同理，只要将固定栏右浮动，使用margin-right空出其宽度即可。

#aside{
  width:300px;
  background-color:yellow;
  float:right;
}
#main{
  background-color:aqua;
  margin-right:300px;
}

方法二：浮动布局+负外边距（双飞翼布局的两栏版）

这种方法是创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法：

<div id = "aside">
</div>
<div id = "main">
  <div id = "content"></div>
</div>

div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
  margin-right:-100%;
}
#main{
  width:100%;
  float:left;
}
#content{
  margin-left:300px;
  background-color:aqua;
}

左侧固定栏指定一个右侧的100%的负外边距，为整个屏幕的宽度，这就使得main的最左侧可以与屏幕最左侧对齐。
此时main的宽度是100%，因此需要为其子内容content指定一个左侧的外边距用于空出左侧栏的位置，即左侧栏的宽度300px

这种方法要相对复杂一些，但也很常用。

绝对定位

<div id = "aside">
</div>
<div id = "main">
</div>

#aside{
    position:absolute;
    left:0;
    width:200px;
}
#main{
    margin-left:200px;
}

flex

<div id="container">
    <div id = "aside"></div>
    <div id = "main"></div>
</div>

#container{
    display:flex;
}
#aside{
    flex:0 0 200px;
}
#main{
    flex: 1 1;
}

三栏布局

方法一：绝对定位

左侧栏和右侧栏分别用绝对定位固定在左侧和右侧，中间栏则利用margin-left和margin-right空出左右栏位置来：


<div id = "left">
</div>
<div id = "main">
</div>
<div id = "right">
</div>

html,body{
  margin:0;
  padding:0;
  height:100%;
}
div{
  height:100%;
}
#left{
  width:200px;
  background-color:yellow;
  position:absolute;
  top:0;
  left:0;
}
#main{
  background-color:aqua;
  margin-left:200px;
  margin-right:300px;
}
#right{
  width:300px;
  background-color:orange;
  position:absolute;
  top:0;
  right:0;
}

这里的三个div的位置可以随意调整。

方法二：浮动+负外边距（双飞翼布局）

与两栏布局中的方法二中-100%外边距的使用有异曲同工之妙，注意理解。
在这里插入图片描述

<!--中间栏写在最前面-->
<div id = "main">
  <div id="content"></div>
</div>
<div id = "left">
</div>

<div id = "right">
</div>

html,body{
  margin:0;
  padding:0;
  height:100%;
}
div{
  height:100%;
}


#main{
  background-color:aqua;
  width:100%;
  float:left;
}
#left{
  width:200px;
  background-color:yellow;
  float:left;
  margin-left:-100%;
}

#right{
  width:300px;
  background-color:orange;
  float:left;
  margin-left:-300px;
}

#content{
  margin-left:200px;
  margin-right:300px;
}

这种方法的好处就是主体main在前面，可以先加载主题内容。

方法三：浮动定位法

此种方法最简单，分别另左侧栏和右侧栏向左和向右浮动，中间栏放在最后，再利用左右外边距空出左右栏的位置即可。

<!--左右侧栏的位置可以更改-->
<div id="left"></div>
<div id="right"></div>
<!--中间栏放最后-->
<div id="main"></div>

*{
  margin:0;
  padding:0;
  height:100%;
}
#left{
  width:300px;
  background-color:yellow;
  float:left;
}
#right{
  width:200px;
  background-color:orange;
  float:right;
}
#main{
  background-color:aqua;
  margin-left:300px;
  margin-right:200px;
}

方法四：flexbox

<div>
  <article></article>
  <nav></nav>
  <aside></aside>
</div>

div{
  display:-webkit-flex;
  display:flex;

  margin:0;
  padding:0;
  height:800px;
}
article{
  flex:1 1;
  order:2;  
  background-color:yellow;
}

nav{
  flex:0 0 200px;
  order:1;  
  background-color:blue;
}
aside{
  flex:0 0 200px;
  order:3;
  background-color:aqua;
}

方法五：圣杯布局

双飞翼布局的前身。

<div id="container">
  <div id="center" class="column">#center</div>
  <div id="left" class="column">#left</div>
  <div id="right" class="column">#right</div>
</div>