찾다
웹 프론트엔드HTML 튜토리얼DIV+CSS 自适应布局_html/css_WEB-ITnose

两栏布局,左边定宽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.            
    5.            
    6.                     我是右栏
    7.            
    8.    
    复制代码


    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代码

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


    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的方法:

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

    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!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代码:

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


    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代码

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


    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;
    14.         }
    15.         
    16.         .wrap_content{
    17.                 margin-left: 220px;
    18.                 margin-right: 220px;
    19.                 background-color: yellow;
    20.         }
    21.         .wrap_right{
    22.                 width: 200px;
    23.                 float: left;
    24.                 margin-left: -200px;
    25.                 background-color: green;
    26.         }
    复制代码

    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!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.         }
    复制代码

    성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    HTML 문서의 루트 태그는 무엇입니까?HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AM

    Theroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.

    HTML 태그와 요소가 같은 것입니까?HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM

    이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159

    & lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM

    이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.

    & lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM

    이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.

    HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM

    기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.

    HTML의 다양한 형식 태그는 무엇입니까?HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM

    이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.

    'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM

    이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.

    HTML의 '클래스'속성은 무엇입니까?HTML의 '클래스'속성은 무엇입니까?Apr 28, 2025 pm 05:37 PM

    이 기사는 스타일링 및 JavaScript 조작을위한 요소 그룹에서 HTML '클래스'속성의 역할을 고유 한 'ID'속성과 대조합니다.

    See all articles

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    Video Face Swap

    Video Face Swap

    완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

    뜨거운 도구

    SublimeText3 Linux 새 버전

    SublimeText3 Linux 새 버전

    SublimeText3 Linux 최신 버전

    SecList

    SecList

    SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    VSCode Windows 64비트 다운로드

    VSCode Windows 64비트 다운로드

    Microsoft에서 출시한 강력한 무료 IDE 편집기

    PhpStorm 맥 버전

    PhpStorm 맥 버전

    최신(2018.2.1) 전문 PHP 통합 개발 도구