CSS 이중 비행 날개 레이아웃에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 이중 비행 날개 레이아웃에 대한 자세한 설명

php中世界最好的语言

Mar 21, 2018 pm 01:28 PM

css상해

이번에는 CSS 이중 비행 날개 레이아웃에 대해 자세히 설명하겠습니다. CSS 이중 비행 날개 레이아웃 구현 시 주의 사항은 무엇입니까?

더블 플라잉 윙 레이아웃은 양쪽 끝의 너비와 높이가 고정되고 가운데는 적응형인 3열 레이아웃입니다.

먼저 사진을 찍어보겠습니다. 왼쪽과 오른쪽의 회색 블록은 너비와 높이가 고정되어 있습니다. 가운데 녹색 부분은 너비-높이 적응형입니다

방법 1: flex elastic 레이아웃을 통해 구현

코드를 보세요

//HTML结构，p2是中间的自适应区域
...
<body>
    <p class="wrap">
        <p class="p1"></p>  
        <p class="p2"></p>
        <p class="p3"></p>
    </p>
</body>
...

*{  //先简单粗暴的解决一下浏览器的默认样式  
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing:border-box;   //使用border-box，盒模型好计算，妈妈再也不用担心我算不清块宽高了
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;     //使用弹性布局
    flex-flow:row nowrap;  //以沿主轴方向行显示，不换行，从而来显示3个块
    justify-content:space-around;  //这一个加和不叫其实也没事，加上去的意思就是两端对齐
}

[class^=&#39;p&#39;]{  // 给所有的p都加上高和边框样式，方便观看，不然都缩成一条线了
    height: 400px;
    border: 1px solid #f00;
}

.p1,.p3{  //给两端的p固定的宽
    width: 200px;
    background-color: #ccc;
    flex-shrink: 1; //默认是1，所以不用写也没事，写出来自是表达这个意思
}
.p2{
    background-color: #0f0;
    flex-grow:1;  //这个比较重要，作用是让第二个块的宽度撑满剩余的空间
}

방법 2: 위치 지정을 통해 실현

HTML 구조는 그대로 유지, 스타일을 살펴보세요

.wrap{
    width: 100%;  //同样实现宽高100%铺开
    height: 100%;
    position: relative;  //父层添加相对定位，让子元素相对父层来定位
}
[class^=&#39;p&#39;]{
    height: 400px;
    border: 1px solid #f00;
}
.p1,.p3{
    position: absolute;
    width: 200px;
    background-color: #ccc;
}
.p1{
    left: 0;  //固定在父层的左侧
    top: 0;
}
.p3{
    right: 0;  //固定在父层的右侧
    top: 0;
}
.p2{
    background-color: #0f0;
    /*这个是关键，我们没有给中间的p2添加过宽属性，所以默认占用父层宽的100%，
     由于两侧块宽是固定的，所以中间的自适应块左右分别200px的外边距中间的content区域就会实现自适应*/
    margin: 0 200px;  
}

Effect

완전히 마스터하신 것 같아요 사례를 읽어본 후 방법 이 기사에서 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:

CSS3의 부드러운 전환 메뉴 표시줄 구현

매초마다 심장 박동 효과를 시뮬레이션

위 내용은 CSS 이중 비행 날개 레이아웃에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS를 잘 모르는 경우 어떤 CSS가 가장 의미가 있습니까?Apr 19, 2025 am 09:56 AM

Peter-Paul 은이 질문을 게시했습니다.

클립 경로로 애니메이션Apr 19, 2025 am 09:52 AM

Clip-Path는 우리가 일반적으로 알고있는 CSS 속성 중 하나이지만 어떤 이유로 든 종종 도달하지 못할 수도 있습니다. 의미가 약간 위협적입니다

Gatsby와 함께 GraphQL 놀이터 사용Apr 19, 2025 am 09:51 AM

나는 대부분의 사람들이 이미 개츠비에 대해 들었다고 가정하고 있으며, 적어도 그것이 기본적으로 반응 사이트의 정적 사이트 생성기라는 것을 느슨하게 알고 있습니다. 일반적으로

유형 또는 테스트 : 왜 둘 다 안됩니까?Apr 19, 2025 am 09:50 AM

때때로, 토론은 타이핑 된 JavaScript의 가치에 대해 불쾌합니다. "더 많은 테스트를 작성하십시오!" 상대방을 외칩니다. "단위 테스트를 유형으로 교체하십시오!"

git의 그래픽 사용자 인터페이스Apr 19, 2025 am 09:46 AM

Lemme는 요즘 Git Guis의 주요 플레이어처럼 보이는 것을 마무리합니다.

자신의 게으른 하중을 굴리기위한 팁Apr 19, 2025 am 09:44 AM

“우리는 게으른 짐을 사용할 수 있습니다!”라고 들었을 수도 있습니다. 특히 무거운 웹 페이지를 슬림 한 방법을 찾을 때.

CSS 2019 상태 조사에서 세 가지 예측Apr 19, 2025 am 09:43 AM

CSS 상태와 같은 개발자 설문 조사를 실행하는 것은 다단계 프로세스입니다. 먼저 데이터를 수집해야합니다. 그런 다음 사용 가능한 모양으로 처리합니다.

마지막으로 ... 마침내 약속의 게시물Apr 19, 2025 am 09:39 AM

"마침내 JavaScript 약속으로 언제 발사됩니까?" 이것은 최근 워크숍에서 묻는 질문이며, 나는 약간의 게시물을 작성하기 위해 작은 게시물을 작성할 것이라고 생각했습니다.

See all articles

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.