masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web html tutorial DIV+CSS 自适应布局_html/css_WEB-ITnose

DIV+CSS 自适应布局_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:33 AM

两栏布局，左边定宽200px，右边自适应。如何实现？
我的第一个反应就是：用flex伸缩盒呀，然后balabala...
说完之后，面试官说，还有没有别的方法？flex有些浏览器不支持
嗯...我愣了一下，平常遇到这种问题貌似都是这么写的...
别的方法？我又想了想。JS?对，JS肯定可以。
然后就说，可以用JS获取当前窗口宽度，然后减去200px就是右边的宽度了
面试官：嗯，这样的确可以，但是布局一般不要用JS，还有没有别的方法？CSS的
额，这下我完全愣住了好嘛，人也变得有些紧张。还要别的方法啊，什么方法呢？？？
哎呀妈呀，想不出来，肿么办...
然后面试官看了我半天，十分体谅的说，那我们进行下一个问题吧...
（以上面试官原话记不大请了，但是意思就是这样~）

回来后，经过百度，哇！原来方法如此之多~还如此简单~
下面就来总结一下~


一、两栏布局（左定宽，右自动）
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
HTML代码：

  1.    
  2.            
  3.                     我是左栏
  4.            
  •            
  •                     我是右栏
  •            
  •    
    • 复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 margin: 10px;
    7.         }
    8.         .wrap_left{
    9.                 float: left;
    10.                 width: 200px;
    11.                 background-color: red;
    12.         }
    13.         .wrap_right{
    14.                 margin-left: 220px;
    15.                 background-color: green;
    16.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    2.position + margin
    即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。
    举例：
    HTML代码

    1.    
    2.            
    3.                     我是左栏
    4.            
  •            
  •                     我是右栏
  •            
  •    
    • 复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 margin: 10px;
    7.                 position: relative;
    8.         }
    9.         .wrap_left{
    10.                 position: absolute;
    11.                 width: 200px;
    12.                 background-color: red;
    13.         }
    14.         .wrap_right{
    15.                 margin-left: 220px;
    16.                 background-color: green;
    17.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    3.float + 负margin
    即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
    固定宽度元素设置margin-left属性为负值：-100%；
    除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
    举例：
    HTML代码

    2.            
    3.                     我是右栏
    4.            
    5.    
    6.           
    7.                     我是左栏
    8.    
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 float: left;
    7.                 width: 100%;
    8.         }
    9.         .wrap .wrap_right{
    10.                 margin-left: 220px;
    11.                 background-color: green;
    12.         }
    13.         .wrap_left{
    14.                 float: left;
    15.                 width: 200px;
    16.                 margin-left: -100%;
    17.                 background-color: red;
    18.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    注：使用的float属性，必要时清除一下浮动。

    4.用table布局实现
    来自评论里@qazxsw的方法：

    2.    
    3.         
    4.         
    5.    
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com


    不过这个方法，一定要设置高度才可以~


    5.触发BFC实现   —— 来自评论里柯南同学@15913127081的方法
    关于BFC是什么、怎么触发BFC以及BFC可以用来做什么，大家可以看看这篇，前端精选文摘：BFC 神奇背后的原理（我会告诉你我也是才看的么~哈哈~）
    实现方法，即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。（可以触发BFC的属性？继续看上面那个链接！！）
    示例：
    HTML代码：

    1.        
    2.                 我是左栏
    3.        
    4.        
    5.                 我是右栏
    6.        
    复制代码


    CSS代码：

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         
    6.         .wrap_left{
    7.                 float: left;
    8.                 width: 200px;
    9.                 background-color: red;
    10.         }
    11.         .wrap_right{
    12.                 overflow: hidden;
    13.                 background-color: green;
    14.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    前面有说到一般我都是用的flex伸缩盒，那也来说一下用flex怎么实现的吧
    6.flex伸缩盒方法
    即父标签设置display:flex属性，自适应元素设置flex-grow:1;
    HTML代码

    1.    
    2.                
    3.                         我是左栏
    4.                
    5.             
    6.                         我是右栏
    7.                
    8.        
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 display: flex;
    7.                 display: -webkit-flex;
    8.         }
    9.         .wrap_left{                
    10.                 width: 200px;
    11.                 background-color: red;
    12.         }
    13.         .wrap_right{        
    14.                 flex-grow:1;
    15.                 -webkit-flex-grow:1;
    16.                 background-color: green;
    17.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    进阶
    二、三栏布局
    掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。
    下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现
    1. float + margin（两侧定宽，中间自适应）
    HTML代码：

    1.         
    2.                     我是左栏
    3.         
    4.            
    5.                     我是右栏
    6.            
    7.         
    8.             我是中间栏
    9.         
    复制代码


    CSS代码：

    1. html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap_left{
    6.                 width: 200px;
    7.                 float: left;
    8.                 background-color: red;
    9.         }
    10.         
    11.         .wrap_content{
    12.                 margin-left: 220px;
    13.                 margin-right: 220px;
    14.                 background-color: yellow;
    15.         }
    16.         .wrap_right{
    17.                 width: 200px;
    18.                 float: right;
    19.                 background-color: green;
    20.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    2. position + margin（两侧定宽，中间自适应）
    HTML代码：

    2.                 我是左栏
    3.    
    4.        
    5.                 我是右栏
    6.        
    7.    
    8.         我是中间栏
    9.    
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap_left{
    6.                 width: 200px;
    7.                 position: absolute;
    8.                 background-color: red;
    9.                 left: 0;
    10.         }
    11.         
    12.         .wrap_content{
    13.                 margin-left: 220px;
    14.                 margin-right: 220px;
    15.                 background-color: yellow;
    16.         }
    17.         .wrap_right{
    18.                 width: 200px;
    19.                 position: absolute;
    20.                 right: 0;
    21.                 background-color: green;
    22.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    3.float + 负margin（两侧定宽，中间自适应）
    HTML代码

    2.             
    3.                 我是中间栏
    4.             
    5.    
    6.    
    7.                 我是左栏
    8.    
    9.        
    10.                 我是右栏
    11.        
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 float: left;;
    7.                 width: 100%;
    8.         }
    9.         .wrap_left{
    10.                 width: 200px;
    11.                 float: left;
    12.                 margin-left: -100%;
    13.                 background-color: red;
    15.         }
    16.         
    17.         .wrap_content{
    18.                 margin-left: 220px;
    19.                 margin-right: 220px;
    20.                 background-color: yellow;
    21.         }
    22.         .wrap_right{
    23.                 width: 200px;
    24.                 float: left;
    25.                 margin-left: -200px;
    26.                 background-color: green;
    27.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    4.table实现

    1.        
    2.    
    3.         
    4.         
    5.         
    6.    
    7.    
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com



    5.BFC方法
    HTML代码

    1.        
    2.                 我是左栏
    3.        
    4.    
    5.                 我是右栏
    6.        
    7.        
    8.                 我是中间栏
    9.        
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         
    6.         .wrap_left{
    7.                 float: left;
    8.                 width: 200px;
    9.                 background-color: red;
    10.         }
    11.         .wrap_right{
    12.                 float: right;
    13.                 width: 200px;
    14.                 background-color: green;
    15.         }
    16.         .wrap_content{
    17.                 overflow: hidden;
    18.                 background-color: yellow;
    19.         }
    复制代码

    运行代码复制代码保存代码提示：您可以先修改部分代码再运行!power by  W3Cfuns.com


    注：HTML中先写定宽元素，再写自适应宽度元素。

    6.flex伸缩盒
    即父标签设置display:flex属性，自适应元素设置flex-grow:1;
    HTML代码

    1.    
    2.                
    3.                         我是左栏
    4.                
    5.                
    6.                         我是中间栏
    7.                
    8.             
    9.                         我是右栏
    10.                
    11.        
    复制代码


    CSS代码

    1.         html,body,div{
    2.                 margin: 0;
    3.                 padding: 0;
    4.         }
    5.         .wrap{
    6.                 display: flex;
    7.                 display: -webkit-flex;
    8.         }
    9.         .wrap_left{                
    10.                 width: 200px;
    11.                 background-color: red;
    12.         }
    13.         .wrap_right{        
    14.                 width: 200px;
    15.                 background-color: green;
    16.         }
    17.         .wrap_content{
    18.                 flex-grow:1;
    19.                 -webkit-flex-grow:1;
    20.                 background-color: yellow;
    21.         }
    复制代码

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Tunjukkan Lagi

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Tetapan grafik terbaik
    3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Assassin's Creed Shadows: Penyelesaian Riddle Seashell
    1 minggu yang lalu By DDD
    R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
    3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Di mana untuk mencari kad kunci kawalan kren di atomfall
    1 minggu yang lalu By DDD
    Tunjukkan Lagi

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Tunjukkan Lagi

    Topik panas

    Di manakah pintu masuk log masuk untuk e-mel gmail?
    7442
    15
    Tutorial CakePHP
    1371
    52
    Apakah format nama akaun stim
    76
    11
    kunci pengaktifan win11 kekal
    36
    19
    Sambungan NYT menunjukkan dan jawapan
    9
    6
    Tunjukkan Lagi
    Related knowledge
    Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

    Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

    Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

    Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

    Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

    Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

    Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

    Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

    Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

    Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

    Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

    Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

    Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

    Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

    Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

    Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

    See all articles