设为首页收藏本站
切换到宽版

 找回密码
 立即注册
Discuz插件下载»首页 › Discuz插件开发 › 开发技术 › div实现左中右布局
返回列表 发新帖
查看: 1687|回复: 0

div实现左中右布局

[复制链接]
admin
发表于 2024-2-21 16:18:13 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.         *{
  7.             margin:0px;
  8.             border: 0px;
  9.             box-sizing:border-box;
  10.         }
  11.         div{
  12.             border: 1px solid black;
  13.         }
  14.         .left{
  15.             height: 100px;
  16.             width: 100px;
  17.             background-color: red;
  18.         }
  19.         .right{
  20.             height: 100px;
  21.             width: 100px;
  22.             background-color: blue;
  23.         }
  24.         .center{
  25.             height: 100px;
  26.         }

  28.         .floatDiv .left{
  29.             float: left;            
  30.         }
  31.         .floatDiv .right{
  32.             float: right;            
  33.         }
  34.         .floatDiv .center{

  36.         }

  38.         .positionDiv .left{
  39.             position: absolute;
  40.             left: 0px;
  41.         }
  42.         .positionDiv .right{
  43.             position: absolute;
  44.             right: 0px;
  45.         }
  46.         .positionDiv .center{
  47.             margin-left: 100px;
  48.             margin-right: 100px;
  49.         }

  51.         .tableDiv{
  52.             display: table;
  53.             width:100%;
  54.         }
  55.         .tableDiv .left{
  56.             display: table-cell;
  57.         }
  58.         .tableDiv .right{
  59.             display: table-cell;
  60.         }
  61.         .tableDiv .center{
  62.             display: table-cell;
  63.         }

  65.         .flexDiv{
  66.             display:flex;
  67.         }
  68.         .flexDiv .left{

  70.         }
  71.         .flexDiv .right{

  73.         }
  74.         .flexDiv .center{
  75.             flex:1;
  76.         }

  78.         .gridDiv{
  79.             display: grid;
  80.             width: 100%;
  81.             grid-template-rows:100px;
  82.             grid-template-columns:100px auto 100px;
  83.         }
  84.         .gridDiv .left{

  86.         }
  87.         .gridDiv .right{

  89.         }
  90.         .gridDiv .center{

  92.         }

  94.     </style>
  95. </head>
  96. <body>
  97.     <h1>float实现布局</h1>
  98.     <div class="floatDiv">
  99.         <div class="left"></div>
  100.         <div class="right"></div>
  101.         <div class="center">
  102.             float布局时，居中的div必须要放在最后。居中的div的模型宽度为整个页面，但是展示的时候会在可视范围内展示。即不会展示大屏居左或者居右的div下面。
  103.             <strong>
  104.                 因为float的初衷是实现文字环绕图片
  105.             </strong>
  106.             ，当我们缩小浏览器的宽度时，会发现文字会环绕在居左和居右的div周围。
  107.         </div>
  108.     </div>
  109.     <br/><br/>
  110.     <h1>position实现布局</h1>
  111.     <div class="positionDiv">
  112.         <div class="left"></div>        
  113.         <div class="right"></div>
  114.         <div class="center">
  115.             position布局时，居中的div必须放到最后。
  116.             <strong>
  117.                 与float不同的事，文字会被左右的div遮盖
  118.             </strong>
  119.             ，所以需要使用margin-left:100px;来调整div
  120.         </div>
  121.     </div>

  123.     <h1>table + table-cell实现布局</h1>
  124.     <div class="tableDiv">
  125.         <div class="left"></div>
  126.         <div class="center">
  127.             使用display:table实现左中右时，
  128.             <strong>
  129.                 居中的div必须放中间
  130.             </strong>
  131.             。另外，父元素必须设置width:100%; 。并且，居中的div的宽度不再为页面的宽度
  132.         </div>        
  133.         <div class="right"></div>        
  134.     </div>

  136.     <h1>flex实现布局</h1>
  137.     <div class="flexDiv">
  138.         <div class="left"></div>
  139.         <div class="center">
  140.             使用flex实现左中右时，居中的div设置flex:1，居中的div的宽度不再为页面的宽度
  141.         </div>        
  142.         <div class="right"></div>        
  143.     </div>

  145.     <h1>grid实现布局</h1>
  146.     <div class="gridDiv">
  147.         <div class="left"></div>
  148.         <div class="center">
  149.             使用grid实现左中右时，网格内部的div的宽度和高度都由父标签设置！
  150.         </div>        
  151.         <div class="right"></div>        
  152.     </div>

  154. </body>
  155. </html>
复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|Discuz插件下载 ( 粤ICP备15082790号-1 )

GMT+8, 2025-4-25 17:14 , Processed in 0.063483 second(s), 16 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表