经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
css常见的各种布局上（两列布局）
来源：cnblogs　　作者：waitklove　　时间：2019/4/15 8:43:52　　对本文有异议

　　常见的布局上（两列布局）

　　　　1.常见的两列布局

　　　　　　1.1左边固定，右边自适应，左边宽度已知，右边默认占满整行，使用left 左浮动，右边不浮动，设置margin-left:左侧宽度

  1. <style>
  2.         .box{
  3.             overflow: hidden;
  4.             height: 500px;
  5.             background-color: bisque;
  6.         }
  7.         .box .box-left {
  8.             margin-left: 10px;
  9.             width: 200px;
  10.             min-height: 100%;
  11.             float: left;
  12.             background-color: pink;
  13.         }
  14.         .box .box-right {
  15.             margin-left: 220px;
  16.             margin-right: 10px;
  17.             height: 100%;
  18.             background-color: green;
  19.         }
  20.         header,footer {
  21.             height: 75px;
  22.             background-color: aqua;
  23.         }
  24.     </style>
  25. <div class="box"> 
  26.         <div class="box-left">
  27.             11
  28.         </div>
  29.         <div class="box-right">
  30.             1shishsihsishsihi是不变的沙发电视柜很多水果和客户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  31.         </div> 
  32.     </div>

　　　　　　1.2右侧固定，宽度已知，左侧自适应，记住固定的区域一定要放自适应区域的右边，

  1. .box{
  2.             height: 500px;
  3.             background-color: bisque;
  4.             position: relative;
  5.         }
  6.         .box .box-right {
  7.             float: right;
  8.             width: 200px;
  9.             min-height: 100%;
  10.             margin-right: 10px;
  11.             background-color: pink;
  12.         }
  13.         .box .box-left {
  14.             margin-left: 10px;
  15.             margin-right: 220px;
  16.             height: 100%;
  17.             background-color: green;
  18.         }
  19.         header,footer {
  20.             height: 75px;
  21.             background-color: aqua;
  22.         }
  23. <div class="box"> 
  24.         <div class="box-right">
  25.             11
  26.         </div>
  27.         <div class="box-left">
  28.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是  
    　　　　　　　　第三个大概了解斯大林经过拉丝几个垃圾
  29.         </div> 
  30.     </div>

　　　　单列固定都是比较简单的还有嵌套一层div方式，还有弹性布局方式，还有grid布局，都能实现单侧固定

　　　　1.3 嵌套一层div ,左侧固定，右侧自适应布局，使用双浮动，右侧自适应先写入，左侧使用margin-left:-100%

　　　　　　不嵌套一层div，右侧直接使用margin-left:左侧宽度也是可以的(这个代码就不写了，和第一个差不多)

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.             overflow: hidden;
  7.         }
  8.         .box .box-right {
  9.             float: left;
  10.             margin-left: -100%;
  11.             width: 200px;
  12.             min-height: 100%;
  13.             background-color: pink;
  14.         }
  15.         .box .box-left {
  16.             float: left;
  17.             width: 100%;
  18.             height: 100%;
  19.             background-color: green;
  20.         }
  21.         .box .box-left .son {
  22.             margin-left: 210px;
  23.         }
  24.         header,footer {
  25.             height: 75px;
  26.             background-color: aqua;
  27.         }
  28.     </style>
  29.  
  30. <body>
  31.     <header>
  32.  
  33.     </header>
  34.     <div class="box"> 
  35.         <div class="box-left">
  36.             <div class="son">
  37.                 1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是 
    　　　　　　　　　　 第三个大概了解斯大林经过拉丝几个垃圾
  38.             </div>
  39.         </div> 
  40.         <div class="box-right">
  41.             11
  42.         </div>
  43.     </div>
  44.     <footer>
  45.  
  46.     </footer>
  47. </body>

　　　　1.4 t弹性布局

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.             display: flex;
  7.         }
  8.         .box .box-left {
  9.             margin-left: 10px;
  10.             flex: 0 0 200px; /* 参数分别是 放大，缩小 初始大小 */
  11.             background-color: pink;
  12.         }
  13.         .box .box-right {
  14.             margin-left: 10px;
  15.             margin-right: 10px;
  16.             height: 100%;
  17.             background-color: green;
  18.         }
  19.         header,footer {
  20.             height: 75px;
  21.             background-color: aqua;
  22.         }
  23.     </style>
  24. <body>
  25.     <header>
  26.  
  27.     </header>
  28.     <div class="box"> 
  29.         <div class="box-left">
  30.             11
  31.         </div>
  32.         <div class="box-right">
  33.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
    　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  34.         </div> 
  35.     </div>
  36.     <footer>
  37.  
  38.     </footer>
  39. </body>

　　　　1.5 grid布局,grid相对于flex的话属于二维布局，可以定义行数，定义列数，定义行高列高，宽度也可以自适应，设置父容器的display:grid。grid 有很大的兼容性问题。慎用

　　　　　　使用grid 相当于设置行数为1，列数为2的grid布局，使用grid可以很容易实现九宫格布局

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.             display: grid;
  7.             padding: 0 10px;
  8.             grid-template-rows: 1fr;
  9.             grid-template-columns: 200px auto;
  10.             grid-gap: 10px;
  11.         }
  12.         .box .box-left {
  13.             background-color: pink;
  14.         }
  15.         .box .box-right {
  16.             background-color: green;
  17.         }
  18.         header,footer {
  19.             height: 75px;
  20.             background-color: aqua;
  21.         }
  22.     </style>
  23. <body>
  24.     <header>
  25.  
  26.     </header>
  27.     <div class="box"> 
  28.         <div class="box-left">
  29.             11
  30.         </div>
  31.         <div class="box-right">
  32.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  33. 　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  34.         </div> 
  35.     </div>
  36.     <footer>
  37.  
  38.     </footer>
  39. </body>

　　　　使用grid实现9宫格布局

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.             display: grid;
  7.             padding: 0 10px;
  8.             grid-template-rows: 1fr 1fr 1fr;
  9.             grid-template-columns: 1fr 1fr 1fr;
  10.             grid-gap: 10px;
  11.         }
  12.         .box .box-left {
  13.             background-color: pink;
  14.         }
  15.         .box .box-right {
  16.             background-color: green;
  17.         }
  18.         header,footer {
  19.             height: 75px;
  20.             background-color: aqua;
  21.         }
  22.     </style>
  23. <body>
  24.     <header>
  25.  
  26.     </header>
  27.     <div class="box"> 
  28.         <div class="box-left">
  29.             11
  30.         </div>
  31.         <div class="box-right">
  32.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  33. 　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  34.         </div> 
  35.         <div class="box-left">
  36.             11
  37.         </div>
  38.         <div class="box-right">
  39.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  40. 　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  41.         </div> 
  42.         <div class="box-left">
  43.             11
  44.         </div>
  45.         <div class="box-right">
  46.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  47. 　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  48.         </div> 
  49.         <div class="box-left">
  50.             11
  51.         </div>
  52.         <div class="box-right">
  53.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  54. 　　　　　　　　大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  55.         </div> 
  56.         <div class="box-left">
  57.             11
  58.         </div>
  59.     </div>
  60.     <footer>
  61.  
  62.     </footer>
  63. </body>
View Code

　　　　1.6 使用定位实现左侧固定右侧自适应布局，

　　　　　　1.6.1使用相对定位，该布局，左侧固定div 的高度已知，

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.         }
  7.         .box .box-left {
  8.             margin-left: 10px;
  9.             width: 200px;
  10.             height: 400px;
  11.             background-color: pink;
  12.         }
  13.         .box .box-right {
  14.             position: relative;
  15.             top: -100%;
  16.             margin-left: 220px;
  17.             height: 100%;
  18.             background-color: green;
  19.             margin-right: 10px;
  20.         }
  21.         header,footer {
  22.             height: 75px;
  23.             background-color: aqua;
  24.         }
  25.     </style>
  26. <body>
  27.     <header>
  28.  
  29.     </header>
  30.     <div class="box"> 
  31.         <div class="box-left">
  32.             11
  33.         </div>
  34.         <div class="box-right">
  35.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  36.             大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  37.         </div> 
  38.     </div>
  39.     <footer>
  40.  
  41.     </footer>
  42. </body>
View Code

　　　　　　1.6.2 使用相对定位实现左侧固定，右侧自适应，div高度未知，将自适应的模块放前面，固定宽度div设置top:-100%

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.         }
  7.         .box .box-left {
  8.             position: relative;
  9.             top: -100%;
  10.             margin-left: 10px;
  11.             width: 200px;
  12.             height: 400px;
  13.             background-color: pink;
  14.         }
  15.         .box .box-right {
  16.             margin-left: 220px;
  17.             height: 100%;
  18.             background-color: green;
  19.             margin-right: 10px;
  20.         }
  21.         header,footer {
  22.             height: 75px;
  23.             background-color: aqua;
  24.         }
  25.     </style>
  26. <body>
  27.     <header>
  28.  
  29.     </header>
  30.     <div class="box"> 
  31.         <div class="box-right">
  32.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  33.             大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  34.         </div> 
  35.         <div class="box-left">
  36.             11
  37.         </div>
  38.     </div>
  39.     <footer>
  40.  
  41.     </footer>
  42. </body>
View Code

　　　　　　1.6.3 使用绝对定位，两个模块都使用绝对定位，可以不使用浮动

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.         }
  7.         .box .box-left {
  8.             position: absolute;
  9.             margin-left: 10px;
  10.             width: 200px;
  11.             height: 400px;
  12.             background-color: pink;
  13.         }
  14.         .box .box-right {
  15.             position: absolute;
  16.             margin-left: 220px;
  17.             height: 100%;
  18.             background-color: green;
  19.             margin-right: 10px;
  20.         }
  21.         header,footer {
  22.             height: 75px;
  23.             background-color: aqua;
  24.         }
  25.     </style>
  26. <body>
  27.     <header>
  28.  
  29.     </header>
  30.     <div class="box"> 
  31.         <div class="box-right">
  32.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  33.             大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  34.         </div> 
  35.         <div class="box-left">
  36.             11
  37.         </div>
  38.     </div>
  39.     <footer>
  40.  
  41.     </footer>
  42. </body>
View Code

　　　　　　1.6.4 左侧先放入固定模块，设置定位为绝对定位，右侧模块无论使用什么定位，只要margin-left：左侧宽度，

　　　　　　　　都能实现这个布局

  1. <style>
  2.         .box{
  3.             height: 500px;
  4.             background-color: bisque;
  5.             position: relative;
  6.         }
  7.         .box .box-left {
  8.             position: absolute;
  9.             margin-left: 10px;
  10.             width: 200px;
  11.             height: 400px;
  12.             background-color: pink;
  13.         }
  14.         .box .box-right {
  15.             margin-left: 220px;
  16.             height: 100%;
  17.             background-color: green;
  18.             margin-right: 10px;
  19.         }
  20.         header,footer {
  21.             height: 75px;
  22.             background-color: aqua;
  23.         }
  24.     </style>
  25. <body>
  26.     <header>
  27.  
  28.     </header>
  29.     <div class="box"> 
  30.         <div class="box-left">
  31.             11
  32.         </div>
  33.         <div class="box-right">
  34.             1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
  35.             大苏打撒郭德纲你只是  第三个大概了解斯大林经过拉丝几个垃圾
  36.         </div>
  37.     </div>
  38.     <footer>
  39.  
  40.     </footer>
  41. </body>
View Code

　　　　上面所以布局的实现图

　　　　总结，左侧固定右侧自适应布局

　　　　　　1、不使用定位，左侧固定，浮动，右侧，设置margin-left：左侧宽度

　　　　　　2、不适用定位，左侧固定，浮动，右侧也浮动，，右侧模块一定要写在左侧模块之前，左侧使用margin-left:-100%

　　　　　　　　2.1右侧使用margin:左侧宽度，

　　　　　　　　2.2左侧设置宽度100%,嵌套一层div,设置margin:左侧宽度（这种方式有点多余，在两列布局上）

　　　　　　3、使用定位，父元素设置display:relative(为啥不使用absolute，子元素要是设置也是absolute，

　　　　　　　　那么都不知道跑什么地方去了)

　　　　　　　　3.1 左元素不设置定位，右侧元素设置相对定位display:relative;则，有点设置top：左侧高度，margin：左侧宽度

　　　　　　　　3.2 左侧宽度不定，则将左侧和右侧元素都设置为相对定位，右侧元素先放入页面，左侧设置top:-100%.右侧设置

　　　　　　　　margin-left：左侧宽度（3.1的左侧高度要已知，而这个左侧高度可以不已知）

　　　　　　　　3.2 左侧元素为绝对定义，则右侧元素直接设置margin-left:左侧宽度，（left，margin-left,对于自适应的

　　　　　　　　宽度，margin会使宽度变窄，而left 是不会的，如果要是用left:左侧宽度，那么一定要设置margin-right:左侧宽度）

　　　　　　4、使用flex布局，单列布局，设置父元素display:flex;左侧元素的flex为;:0 0 width;右侧元素不用设置

　　　　　　5、使用grid布局，grid布局是二维布局，设置为1行，1列，第一列宽度为定位宽度，第二列宽度为auto,子元素不用设置

　　　　上面基本上覆盖了所以的左侧固定，右侧自适吟的布局，第一种最简单， 4 5 有一定兼容性问题，flex常用语移动端。

　　如果您还有更好的方法，请给我留言。

 

原文链接：http://www.cnblogs.com/czkolve/p/10698682.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号