美文网首页视觉艺术
css实现三栏布局的多种方式

css实现三栏布局的多种方式

作者: halapro_liu | 来源:发表于2020-03-28 19:28 被阅读0次

前言

在PC端系统中,三栏布局是很常见的。那么有哪些方式来实现三栏布局呢。

flex布局

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: flex;
}

.left {
  width: 200px;
  background-color: pink;
}

.center {
  flex: 1;
  background-color: orange;
}

.right {
  width: 200px;
  background-color: skyblue;
}

float布局

这里有个主意点,right的div必须在center前,不然右边会塌陷。

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.left {
  float: left;
  background: red;
}

.center {
  background: orange;
}

.right {
  float: right;
  background: skyblue;
}

同时要注意div的特点

  • 空的div是没有高度的。
  • div的高度由其内容决定
  • 如果没有指定float属性,div的宽度等于其父元素的宽度(不管是否有内容)
  • 如果指定了float属性,div的宽度取决于内部圆度的宽度(空的div指定了float属性后既没有宽度也没有高度)

postion布局

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  position: relative;
}

.left {
  position: absolute;
  left: 0;
  width: 200px;
  background-color: pink;
}

.center {
  background-color: orange;
}

.right {
  position: absolute;
  right: 0;
  width: 200px;
  background-color: skyblue;
}

table布局

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: table;
}

.left {
  display: table-cell;
  background: pink;
  width: 400px;
  height: 100%;
}

.center {
  display: table-cell;
  background: orange;
  height: 100%;
}

.right {
  display: table-cell;
  background: skyblue;
  width: 400px;
  height: 100%;
}

网格布局

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: grid;
  grid-template-columns: 200px auto 200px;
}

.left {
  background: pink;
}

.center {
  background: orange;
}

.right {
  background: skyblue;
}

相关文章

  • css实现三栏布局的多种方式

    前言 在PC端系统中,三栏布局是很常见的。那么有哪些方式来实现三栏布局呢。 flex布局 float布局 这里有个...

  • CSS布局(不完全)总结

    CSS布局(不完全)总结 实现水平居中布局的几种方式 方法一: 通过以下CSS代码实现水平居中布局 方法二: 通过...

  • 2019-01-26

    一、总结一下CSS的几种布局以及实现方法 左右布局 左中右 水平居中 垂直居中 1. 左右布局 左右布局很多种实现...

  • CSS布局篇

    1. 引言 CSS常见布局方式有很多种,如table布局、浮动布局、flex/grid布局、响应式布局等。这里先介...

  • Css float属性的一些特点

    Css float属性的一些特点 css布局中float布局是常用的布局方式,用于实现横向多列布局。这个时候我们就...

  • CSS实现三栏布局

    CSS实现三栏布局(5种) 常见的布局方式: float布局、Position定位、table布局、弹性(flex...

  • 知识点之页面布局

    1. CSS圣杯布局的几种实现方式: 1. 浮动实现 2. 绝对定位实现 3. flex布局 4.表格布局...

  • 常见 CSS 布局方式

    前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...

  • 京东面经总结

    一面 css 两栏布局(多种方式) 水平垂直居中(多种方式) js 数据类型 typeof null为什么是obj...

  • CSS布局

    HTML CSS + DIV实现整体布局必备知识利用HTML和CSS实现常见的布局 单列布局 css 实现竖直居中...

网友评论

    本文标题:css实现三栏布局的多种方式

    本文链接:https://www.haomeiwen.com/subject/pybsuhtx.html