经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » Flex » 查看文章
CSS鍚堝苟鍗曞厓鏍煎洓绉嶆柟寮忕ず渚嬭瑙?table/display/flex/grid)_CSS鏁欑▼_CSS
来源：jb51　　时间：2024/3/1 8:41:38　　对本文有异议

鏁堟灉鍥撅細

鏂瑰紡涓€锛歵able銆愭渶绠€鍗曞啓娉曘€?/h3>
  • colspan锛氳瀹氬崟鍏冩牸鍙í璺ㄧ殑鍒楁暟銆?/li>
  • rowspan锛氳瀹氬崟鍏冩牸鍙í璺ㄧ殑琛屾暟銆?/li>

閫氳繃table鐨刢olspan鍜宺owspan杞绘澗瀹炵幇鍗曞厓鏍煎悎骞躲€?/p>

杈规璁剧疆锛歵h/td 鍔?strong>鍙充笅杈规锛宼able鍔?strong>宸︿笂杈规銆?/p> 

  1. <!--html-->
  2. <table border="0" cellspacing="0" cellpadding="0">
  3.   <tr>
  4.     <th style="width: 100px;">绉嶇被</th>
  5.     <th style="width: 100px;">鍚嶇О</th>
  6.     <th>鎻忚堪</th>
  7.   </tr>
  8.   <tr>
  9.     <td rowspan="2">姘存灉</td>
  10.     <td>棣欒晧</td>
  11.     <td>棣欒晧锛堝鍚嶏細Musa nana Lour.锛夋槸鑺晧绉戙€佽姯钑夊睘妞嶇墿銆傛鏍笡鐢燂紝鍏峰寪鍖嶈寧锛岀煯鍨嬬殑楂?.5绫充互涓嬶紝涓€鑸珮涓嶅強2绫?..</td>
  12.   </tr>
  13.   <tr>
  14.     <td>鑻规灉</td>
  15.     <td>鑻规灉锛圡alus pumila Mill.锛夛紝鏄惤鍙朵箶鏈紝閫氬父鏍戞湪鍙珮鑷?5绫筹紝浣嗘牻鍩规爲鏈ㄤ竴鑸彧楂?-5绫冲乏鍙?..</td>
  16.   </tr>
  17.   <tr>
  18.     <td colspan="2">鍏朵粬</td>
  19.     <td>--</td>
  20.   </tr>
  21. </table>
  22. <!--css-->
  23. <style>
  24.   table {
  25.     width: 600px;
  26.     table-layout: fixed;
  27.     border-left: 1px solid #ddd;
  28.     border-top: 1px solid #ddd;
  29.   }
  30.   th, td {
  31.     border-right: 1px solid #ddd;
  32.     border-bottom: 1px solid #ddd;
  33.     vertical-align: middle;
  34.     text-align: center;
  35.     padding: 12px 0;
  36.     color: #666;
  37.     font-size: 14px;
  38.   }
  39.   th {
  40.     font-weight: normal;
  41.   }
  42. </style>

鏂瑰紡浜岋細display: table--涓嶆帹鑽?/h3>

澶栧眰div.distable璁剧疆鏍峰紡display: table;

鍐呭眰div.distable-cell*璁剧疆鏍峰紡display: table-cell;

table甯冨眬涓嬶紝鍙互瀹炵幇鍚堝苟鍗曞厓鏍兼晥鏋溿€傛湁涓ょ偣璇存槑:

1锛変负鍚堝苟鍗曞厓鏍肩殑琛?璁剧疆杈规鏃讹紝姣旇緝澶嶆潅锛屽鏄撻敊浣嶃€?/p>

2锛夋祻瑙堝櫒缂╂斁鍒?00+%灞曠ず鏃讹紝姝ゅ竷灞€浼氬彉褰€?/p>

鍥犳锛岃繖绉嶅啓娉曞苟涓嶆帹鑽愩€?/p> 

  1. <div>
  2.     <div class="distable border-sub-rb border-lt">
  3.         <div class="distable-cell1">绉嶇被</div>
  4.         <div class="distable-cell1">鍚嶇О</div>
  5.         <div class="distable-cell2">鎻忚堪</div>
  6.     </div>
  7.     <div class="distable border-l">
  8.         <div class="distable-cell1 border-rb" style="background-color: #ddd;border-color: red">姘存灉</div>
  9.         <div class="distable-cell3">
  10.             <div class="distable border-sub-rb">
  11.                 <div class="distable-cell1">棣欒晧</div>
  12.                 <div class="distable-cell2">棣欒晧锛堝鍚嶏細Musa nana Lour.锛夋槸鑺晧绉戙€佽姯钑夊睘妞嶇墿銆傛鏍笡鐢燂紝鍏峰寪鍖嶈寧锛岀煯鍨嬬殑楂?.5绫充互涓嬶紝涓€鑸珮涓嶅強2绫?..</div>
  13.             </div>
  14.             <div class="distable border-sub-rb">
  15.                 <div class="distable-cell1">鑻规灉</div>
  16.                 <div class="distable-cell2">鑻规灉锛圡alus pumila Mill.锛夛紝鏄惤鍙朵箶鏈紝閫氬父鏍戞湪鍙珮鑷?5绫筹紝浣嗘牻鍩规爲鏈ㄤ竴鑸彧楂?-5绫冲乏鍙?..</div>
  17.             </div>
  18.         </div>
  19.     </div>
  20.     <div class="distable border-r">
  21.         <div class="distable-cell4 border-lb">鍏朵粬</div>
  22.         <div class="distable-cell2 border-bl" style="background-color: #ddd;border-color: red">--</div>
  23.     </div>
  24. </div>
  25. <style>
  26.     .distable {
  27.         display: table;
  28.         color: #666;
  29.         font-size: 14px;
  30.         box-sizing: border-box;
  31.     }
  32.     [class*=distable-cell] {
  33.         display: table-cell;
  34.         text-align: center;
  35.         vertical-align: middle;
  36.         box-sizing: border-box;
  37.     }
  38.     .distable-cell1 {
  39.         width: 100px;
  40.     }
  41.     .distable-cell2 {
  42.         width: 400px;
  43.         padding: 12px 0;
  44.     }
  45.     .distable-cell3 {
  46.         width: 500px;
  47.     }
  48.     .distable-cell4 {
  49.         width: 200px;
  50.     }
  51.     .border-sub-rb [class*=distable-cell] {
  52.         border-right: 1px solid #ddd;
  53.         border-bottom: 1px solid #ddd;
  54.         padding: 12px 0;
  55.     }
  56.     .border-lt {
  57.         border-left: 1px solid #ddd;
  58.         border-top: 1px solid #ddd;
  59.     }
  60.     .border-lb {
  61.         border-left: 1px solid #ddd;
  62.         border-bottom: 1px solid #ddd;
  63.     }
  64.     .border-l {
  65.         border-left: 1px solid #ddd;
  66.     }
  67.     .border-rb {
  68.         border-right: 1px solid #ddd;
  69.         border-bottom: 1px solid #ddd;
  70.     }
  71.     .border-bl {
  72.         border-bottom: 1px solid #ddd;
  73.         border-left: 1px solid #ddd;
  74.     }
  75.     .border-r {
  76.         border-right: 1px solid #ddd;
  77.     }
  78. </style>

鏂瑰紡涓夛細display: flex

flex甯冨眬涓嬶紝鍙互瀹炵幇鍚堝苟鍗曞厓鏍兼晥鏋溿€傛湁涓や釜闅剧偣:

1锛夊悎骞跺崟鍏冩牸鐨勫瀭鐩村眳涓晥鏋滐細flex甯冨眬宓屽锛屽唴灞傜殑flex璁剧疆align-items: center;

2锛夎竟妗嗙殑璁剧疆锛氳缃瘮杈冨鏉傦紝瀹规槗閿欎綅銆?/p>

铏界劧鍙互瀹炵幇鍚堝苟鍗曞厓鏍兼晥鏋滐紝骞朵笉鎺ㄨ崘銆?/p> 

  1. <div style="width: 600px;">
  2.     <div class="flex-box border-sub-rb border-lt">
  3.         <div class="flex-cell1">绉嶇被</div>
  4.         <div class="flex-cell1">鍚嶇О</div>
  5.         <div class="flex-cell2">鎻忚堪</div>
  6.     </div>
  7.     <div class="flex-box border-l">
  8.         <div class="flex-cell1 border-b flex-cc" style="background-color: #ddd;border-color: red"><div>姘存灉</div></div>
  9.         <div class="flex-cell3 border-r">
  10.             <div class="flex-box border-sub-bl">
  11.                 <div class="flex-cell1 flex-cc"><div>棣欒晧</div></div>
  12.                 <div class="flex-cell2 flex-cc" style="background-color: #ddd;border-color: red"><div>棣欒晧锛堝鍚嶏細Musa nana Lour.锛夋槸鑺晧绉戙€佽姯钑夊睘妞嶇墿銆傛鏍笡鐢燂紝鍏峰寪鍖嶈寧锛岀煯鍨嬬殑楂?.5绫充互涓嬶紝涓€鑸珮涓嶅強2绫?..</div></div>
  13.             </div>
  14.             <div class="flex-box border-sub-bl">
  15.                 <div class="flex-cell1 flex-cc"><div>鑻规灉</div></div>
  16.                 <div class="flex-cell2 flex-cc"><div>鑻规灉锛圡alus pumila Mill.锛夛紝鏄惤鍙朵箶鏈紝閫氬父鏍戞湪鍙珮鑷?5绫筹紝浣嗘牻鍩规爲鏈ㄤ竴鑸彧楂?-5绫冲乏鍙?..</div></div>
  17.             </div>
  18.         </div>
  19.     </div>
  20.     <div class="flex-box">
  21.         <div class="flex-cell4 border-lb flex-cc"><div>鍏朵粬</div></div>
  22.         <div class="flex-cell2 border-rbl flex-cc" style="background-color: #ddd;border-color: red"><div>--</div></div>
  23.     </div>
  24. </div>
  25. <style>
  26.     .flex-box {
  27.         display: flex;
  28.         flex-direction: row;
  29.         flex-wrap: nowrap;
  30.         color: #666;
  31.         font-size: 14px;
  32.         text-align: center;
  33.         box-sizing: border-box;
  34.     }
  35.     [class*=flex-cell] {
  36.         box-sizing: border-box;
  37.     }
  38.     .flex-cell1 {
  39.         width: 100px;
  40.     }
  41.     .flex-cell2 {
  42.         width: 400px;
  43.         padding: 12px 0;
  44.     }
  45.     .flex-cell3 {
  46.         width: 500px;
  47.     }
  48.     .flex-cell4 {
  49.         width: 200px;
  50.     }
  51.     .border-sub-rb [class*=flex-cell] {
  52.         border-right: 1px solid #ddd;
  53.         border-bottom: 1px solid #ddd;
  54.         padding: 12px 0;
  55.     }
  56.     .border-sub-bl [class*=flex-cell] {
  57.         border-bottom: 1px solid #ddd;
  58.         border-left: 1px solid #ddd;
  59.     }
  60.     .border-lt {
  61.         border-left: 1px solid #ddd;
  62.         border-top: 1px solid #ddd;
  63.     }
  64.     .border-lb {
  65.         border-left: 1px solid #ddd;
  66.         border-bottom: 1px solid #ddd;
  67.     }
  68.     .border-l {
  69.         border-left: 1px solid #ddd;
  70.     }
  71.     .border-rbl {
  72.         border-right: 1px solid #ddd;
  73.         border-bottom: 1px solid #ddd;
  74.         border-left: 1px solid #ddd;
  75.     }
  76.     .border-b {
  77.         border-bottom: 1px solid #ddd;
  78.     }
  79.     .border-r {
  80.         border-right: 1px solid #ddd;
  81.     }
  82.     .flex-cc {
  83.         display: flex;
  84.         flex-direction: row;
  85.         flex-wrap: nowrap;
  86.         justify-content: center;
  87.         align-items: center;
  88.     }
  89. </style>

鏂瑰紡鍥涳細display: grid

grid甯冨眬瀛︿範鎴愭湰浼氶珮涓€浜涳紝浣嗕唬鐮佺湅鐫€鏈€娓呮櫚銆?/p>

grid鏈夊吋瀹规€ч棶棰橈紝璋ㄦ厧浣跨敤銆?/p> 

  1. <div class="container">
  2.       <div class="item item-1"><div>绉嶇被</div></div>
  3.       <div class="item item-2"><div>鍚嶇О</div></div>
  4.       <div class="item item-3"><div>鎻忚堪</div></div>
  5.       <div class="item item-4"><div>姘存灉</div></div>
  6.       <div class="item item-5"><div>棣欒晧</div></div>
  7.       <div class="item item-6"><div>棣欒晧锛堝鍚嶏細Musa nana Lour.锛夋槸鑺晧绉戙€佽姯钑夊睘妞嶇墿銆傛鏍笡鐢燂紝鍏峰寪鍖嶈寧锛岀煯鍨嬬殑楂?.5绫充互涓嬶紝涓€鑸珮涓嶅強2绫?..</div></div>
  8.       <div class="item item-7"><div>鑻规灉</div></div>
  9.       <div class="item item-8"><div>鑻规灉锛圡alus pumila Mill.锛夛紝鏄惤鍙朵箶鏈紝閫氬父鏍戞湪鍙珮鑷?5绫筹紝浣嗘牻鍩规爲鏈ㄤ竴鑸彧楂?-5绫冲乏鍙?..</div></div>
  10.       <div class="item item-9"><div>鍏朵粬</div></div>
  11.       <div class="item item-10"><div>--</div></div>
  12. </div>
  13. <style>
  14.   .container {
  15.     display: grid;
  16.     grid-template-columns: repeat(6, 100px);
  17.     color: #666;
  18.     font-size: 14px;
  19.     border-left: 1px solid #ddd;
  20.     border-top: 1px solid #ddd;
  21.   }
  22.   .item {
  23.     border-right: 1px solid #ddd;
  24.     border-bottom: 1px solid #ddd;
  25.     text-align: center;
  26.     padding: 12px 0;
  27.     display: grid;
  28.     align-items: center;
  29.   }
  30.   .item-1 {
  31.     grid-column: 1 / 2;
  32.   }
  33.   .item-2 {
  34.     grid-column: 2 / 3;
  35.   }
  36.   .item-3 {
  37.     grid-column: 3 / 7;
  38.   }
  39.   .item-4  {
  40.     grid-row: 2 / 4
  41.   }
  42.   .item-6 {
  43.     grid-column: 3 / 7;
  44.   }
  45.   .item-8 {
  46.     grid-column: 3 / 7;
  47.   }
  48.   .item-9 {
  49.     grid-column: 1 / 3;
  50.   }
  51.   .item-10 {
  52.     grid-column-end: span 4;
  53.   }
  54. </style>

鎬荤粨锛?/h3>

table甯冨眬浠嶆槸瀹炵幇鍚堝苟鍗曞厓鏍兼渶绠€鍗曠殑鏂瑰紡锛実rid娆′箣锛宖lex鍐嶆锛宒isplay:table涓嶆帹鑽愩€?/p>

鍒版杩欑瘒鍏充簬CSS鍚堝苟鍗曞厓鏍煎洓绉嶆柟寮忥細table/display/flex/grid鐨勬枃绔犲氨浠嬬粛鍒拌繖浜?鏇村鐩稿叧CSS鍚堝苟鍗曞厓鏍煎唴瀹硅鎼滅储鑴氭湰涔嬪浠ュ墠鐨勬枃绔犳垨缁х画娴忚涓嬮潰鐨勭浉鍏虫枃绔狅紝甯屾湜澶у浠ュ悗澶氬鏀寔鑴氭湰涔嬪锛?/p>

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

Flex热门文章

  • 解决display:flex属性 justify-content: space-between换行后的排版问题 _CSS布局实例_CSS
  • 详解flex实现左右布局中按钮溢出隐藏效果_CSS教程_CSS
  • flex布局实现左侧文字溢出省略右侧文字自适应_CSS布局实例_CSS
  • flex布局被子元素撑开如何保持内容不超出容器的方法_CSS教程_CSS
  • css3中flex布局宽度不生效的解决_css3_CSS
  • 关于flex 上下文中自动 margin的问题(完整例子)_CSS教程_CSS
  • CSS：弹性布局（display:flex）
  • 详解flex布局的元素如何分配容器的剩余空间_CSS教程_CSS
  • css flex几种多列布局_CSS教程_CSS
  • CSS3 Flex 弹性布局实例代码详解_css3_CSS

    • Flex推荐文章

  • CSS鍚堝苟鍗曞厓鏍煎洓绉嶆柟寮忕ず渚嬭瑙?table/display/flex/grid)_CSS鏁欑▼_CSS
  • 【布局技巧】Flex 布局下居中溢出滚动截断问题
  • 别再用 float 布局了，flex 才是未来！
  • 一篇文章带你掌握Flex布局的所有用法 - 公众号-web前端进阶
  • 关于flex 上下文中自动 margin的问题(完整例子)_CSS教程_CSS
  • CSS弹性布局FLEX,媒体查询及移动端点击事件的实现_CSS教程_CSS
  • css弹性盒flex-grow、flex-shrink、flex-basis详解_CSS教程_CSS
  • FLEXLINK指令的理解
  • 10分钟理解CSS3 FlexBox弹性布局_css3_CSS

    • 本站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号