css三种布局方式

不负当下

已于 2022-01-28 17:34:25 修改

阅读量1.1k

点赞数 2

分类专栏：布局方式文章标签： css

于 2021-03-04 11:17:32 首次发布

本文链接：https://blog.csdn.net/weixin_45272209/article/details/114364074

版权

布局方式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css几种布局方式

流体布局

left和right都是浮动元素(脱离文档流)，漂浮于普通文档流上方，使其盖住main设置的margin
main(普通文档流)左右两边设置margin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流体布局</title>
</head>

<body>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>
</body>
<style>
  body{
    margin: 0;
    padding: 0;
  }
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background: red;
  }

  .right {
    float: right;
    width: 200px;
    height: 200px;
    background: blue;
  }

  .main {
    margin-left: 100px;
    margin-right: 200px;
    height: 200px;
    background: green;
  }
</style>
<script>

</script>
</html>

圣杯布局
- 先有个父容器contrainer左右设置padding让其中间空出来存main
  - 并给其子容器都设置浮动属性(保证都在同一水平高度)
- main宽度设为100%(占满中间内容)
- left在main后面 (利用margin和相对定位到最左边)
  - margin-left:-100% 让其在contrianer的最左位置
  - position:relative;left:-150px；让其占据最左边
- right 也利用margin和定位放到最右边

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
</head>

<body>
<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
<style>

  .container {
    padding-left: 150px;
    padding-right: 190px;
    background: #3a9a70;
    height: 500px;

  }
  .main {
    float: left;
    width: 100%;
    background: #9a6e3a;
    height: 100%;


  }
  .left {
    /*float: left;*/
    /*width: 190px;*/
    /*margin-left: -100%;*/
    /*position: relative;*/
    /*left: -150px;*/
    background: #9a553a;
    /*height: 100%;*/

    float: left;
    width: 150px;
    margin-left: -100%;
    position: relative;
    left: -150px;
    height: 100%;

  }
  .right {
    float: left;
    width: 190px;
    margin-left: -190px;
    position: relative;
    right: -190px;
    background: #3a4a9a;
    height: 100%;


    /*float: right;*/
    /*width: 190px;*/
    /*margin-right: -190px;*/
    /*height: 100%;*/


  }
</style>
<script>

</script>
</html>

双飞翼布局
- content里面只有main,left和right利用浮动放入左右两边
- content、left、right都要设置浮动让其保持在同一水平线上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双飞翼布局</title>
</head>

<body>
<div>
<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<style>
  .content{
    height: 500px;
    background: #724d4d;
    float: left;
    width: 100%;
  }
.main{
  height: 100%;
  margin:0 200px;
  background: #808b46;
}
  .left{
    margin-left: -100%;
    float: left;
    width: 200px;
    height: 500px;
    background: #e22c09;
  }
  .right{
    margin-left:-200px ;
    float: left;
    width: 200px;
    height: 500px;
    background: #e22c09;
  }
</style>
<script>

</script>
</html>

不负当下

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css三种布局方式

css几种布局方式流体布局left和right都是浮动元素(脱离文档流)，漂浮于普通文档流上方，使其盖住main设置的marginmain(普通文档流)左右两边设置margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>流体布局</title></head><body><div c
复制链接

扫一扫