系統城裝機大師 - 唯一官網:www.farandoo.com!

當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

詳解左右寬度固定中間自適應html布局解決方案

時間:2019-12-05來源:系統城作者:電腦系統城

本文介紹了詳解左右寬度固定中間自適應html布局解決方案,分享給大家,具體如下:

a.使用浮動布局

html結構如下


 
  1. <div class="box">
  2. <div class="left">left</div>
  3. <div class="right">right</div>
  4. <div class="center">center</div>
  5. </div>
  6. //此處注意要先渲染左、右浮動的元素才到中間的元素。元素浮動后剩余兄弟塊級元素會占滿父元素的寬度
  7. <style>
  8. .box{
  9. height:200px;
  10. }
  11. .left{
  12. float:left;
  13. width:300px;
  14. }
  15. .right{
  16. float:right;
  17. width:300px;
  18. }
  19. </style>

b.使用固定定位

html結構如下


 
  1. <div class="box">
  2. <div class="left">left</div>
  3. <div class="right">right</div>
  4. <div class="center">center</div>
  5. </div>
  6. //和浮動布局同理,先渲染左右元素,使其定位在父元素的左右兩端,剩余的中間元素占滿父元素剩余寬度。
  7. <style>
  8. .box{
  9. position: relative;
  10. }
  11. .left{
  12. position: absolute;
  13. width: 100px;
  14. left: 0;
  15. }
  16. .right{
  17. width:100px;
  18. position: absolute;
  19. right: 0;
  20. }
  21. .center{
  22. margin: 0 100px;
  23. background: red;
  24. }
  25. </style>

c.表格布局

將父元素display:table,子元素display:table-cell,會將它變為行內塊。

這種布局方式的優點是兼容性好。


 
  1. <div class="box">
  2. <div class="left">
  3. left
  4. </div>
  5. <div class="center">
  6. center
  7. </div>
  8. <div class="right">
  9. right
  10. </div>
  11. </div>
  12. <style>
  13. .box{
  14. display: table;
  15. width: 100%;
  16. }
  17. .left{
  18. display: table-cell;
  19. width: 100px;
  20. left: 0;
  21. }
  22. .right{
  23. width:100px;
  24. display: table-cell;
  25. }
  26. .center{
  27. width: 100%;
  28. background: red;
  29. }
  30. </style>

d.彈性布局

父元素display:flex子元素會全部并列在一排。

子元素中flex:n的寬度會將父元素的寬度/n

如flex:1,寬度就等于父元素高度。

彈性布局的缺點是兼容性不高,目前IE瀏覽器無法使用彈性布局


 
  1. <div class="box">
  2. <div class="left">
  3. left
  4. </div>
  5. <div class="center">
  6. center
  7. </div>
  8. <div class="right">
  9. right
  10. </div>
  11. </div>
  12. <style>
  13. .box{
  14. display: flex;
  15. width: 100%;
  16. }
  17. .left{
  18.  
  19. width: 100px;
  20. left: 0;
  21. }
  22. .right{
  23. width:100px;
  24. }
  25. .center{
  26. flex:1;
  27. }
  28. </style>

e.網格布局

父元素display:grid;

grid-templatecolumns:100px auto 100px;

依次為第一個子元素寬100px 第二個自適應 第三個100px;

網格布局的優點是極為簡便,直接通過父元素樣式決定,缺點是兼容性不高。


 
  1. <div class="box">
  2. <div class="left">
  3. left
  4. </div>
  5. <div class="center">
  6. center
  7. </div>
  8. <div class="right">
  9. right
  10. </div>
  11. </div>
  12. <style>
  13. .box{
  14. display: grid;
  15. grid-template-columns: 100px auto 100px;
  16. width: 100%;
  17. }
  18. </style>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

分享到:

相關信息

  • HTML5之audio屬性

    audio主要支持的音頻格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...

    2020-03-04

  • HTML連載72-動畫效果及其他屬性

    一、動畫效果 1.過渡與動畫相類似,都需要三要素,那么他們的區別在哪里呢? ?答:過渡必須是人為的觸發才會執行動畫,動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點: (1)過度和動畫都是用來給元素添加動畫的;(2)過渡...

    2020-03-04

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放