찾다
웹 프론트엔드CSS 튜토리얼CSS 3열 레이아웃의 세 가지 구현 방법(성배 레이아웃, 이중 비행 날개 레이아웃, Flex 레이아웃)

이 글의 내용은 LNMP가 환경 구축을 소스 코드 형태로 기록하는 과정(상세 내용)입니다. 필요한 참고 자료가 있으면 도움이 되길 바랍니다.

렌더링:

CSS 3열 레이아웃의 세 가지 구현 방법(성배 레이아웃, 이중 비행 날개 레이아웃, Flex 레이아웃)

성배 레이아웃

nbsp;html>


<title>圣杯</title>
<style>
.container{
    padding:0 200px 0 180px;
    height:100px;
}
.left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:red;
    position:relative;
    left:-180px;
}
.main{
    float:left;
    width:100%;
    height:100px;
    background:blue;
}

.right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:green;
    position:relative;
    right:-200px;
}

</style>


<div>
  <div>middle</div>
  <div>left</div>
  <div>right</div>
<h3 id="Double-Flying-Wing-Layout">Double Flying Wing Layout</h3>
<pre class="brush:php;toolbar:false">nbsp;html>


    <meta>
    <title>双飞翼</title>
    <style>
.main{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
.left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:red;
}
.right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:green;
}
</style>


  <div></div>
  <div>left</div>
  <div>right</div>

Flex Layout

nbsp;html>


    <meta>
    <title>Flex</title>
    <style>
.flex {
    display: flex;
    flex-flow: row;
}
.left{
    width: 180px;
    height: 100px;    
    background-color: red;
}
.main{
    flex: 1; 
    height: 100px;
    background-color: blue;
}
.right {
    width: 200px;
    height: 100px;
    background-color: green;
}
    </style>


<div>
    <div>left</div>
    <div>middle</div>
    <div>right</div>
</div>

메인이 왼쪽 모듈과 오른쪽 모듈 모두에 특정 너비를 제공하려는 경우 오른쪽에는 padding: 0 100px 0 200px 또는 margin: 0 100px 0 200px 만 있습니다.
이 두 가지 경로:
마진 경로를 택하면 끝까지 계속 가면 작성하는 최종 코드가 이중 비행 날개임을 알 수 있습니다.
패딩 경로를 택하면 그것이 성배입니다.

추천 관련 기사:

CSS(코드 포함)로 3열 레이아웃을 구현하는 세 가지 방법

CSS를 사용하여 롤러코스터 로더의 애니메이션 효과를 구현하는 방법

위 내용은 CSS 3열 레이아웃의 세 가지 구현 방법(성배 레이아웃, 이중 비행 날개 레이아웃, Flex 레이아웃)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
如何在Vue项目中使用第三方UI库进行页面布局如何在Vue项目中使用第三方UI库进行页面布局Oct 08, 2023 am 08:38 AM

如何在Vue项目中使用第三方UI库进行页面布局Vue是一种流行的JavaScript框架,被广泛用于构建用户界面。在Vue项目中,我们常常需要使用第三方UI库来帮助我们快速布局和美化页面。本文将详细介绍如何在Vue项目中使用第三方UI库进行页面布局,并提供具体的代码示例。步骤1:安装第三方UI库首先,我们需要从npm安装所需的第三方UI库。在本文中,我们以E

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

常用的Flex布局属性有哪些常用的Flex布局属性有哪些Feb 25, 2024 am 10:42 AM

flex布局的常用属性有哪些,需要具体代码示例Flex布局是一种用于设计响应式网页布局的强大工具。它通过使用一组灵活的属性,可以轻松控制网页中元素的排列方式和尺寸。在本文中,我将介绍Flex布局的常用属性,并提供具体的代码示例。display:设置元素的显示方式为Flex。.container{display:flex;}flex-directi

手把手带你使用CSS Flex和Grid布局实现3D骰子(附代码)手把手带你使用CSS Flex和Grid布局实现3D骰子(附代码)Sep 23, 2022 am 09:58 AM

在前端面试中,经常会问到如何使用 CSS 实现骰子/麻将布局。下面本篇文章给大家介绍一下用CSS 创建一个 3D 骰子(Flex和Grid布局实现3D骰子)的方法,希望对大家有所帮助!

Vue开发经验总结:解决页面布局和排版问题的实践Vue开发经验总结:解决页面布局和排版问题的实践Nov 22, 2023 am 10:25 AM

Vue是一种流行的JavaScript框架,被广泛应用于前端开发中。在使用Vue进行开发的过程中,我们经常会遇到一些页面布局和排版的问题。本文将总结一些我们在Vue开发中遇到的问题,并分享一些解决这些问题的实践经验。一、响应式布局在开发Web应用时,我们往往需要实现一个响应式布局,让页面在不同的设备上都能够良好地显示。Vue提供了很多解决方案,如Vue的响应

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

一文详解三个 flex 属性对元素的影响一文详解三个 flex 属性对元素的影响Aug 30, 2022 pm 07:50 PM

在开发的时候经常用 flex 这个属性作用于弹性盒子的子元素,例如:flex:1或者flex: 1 1 auto,那么这个属性到底控制了元素怎么的行为呢?flex:1又究竟是什么含义呢?让这篇文章带你彻底了解 flex 属性吧!

带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basisDec 06, 2022 pm 08:37 PM

本篇文章带大家深入了解CSS Flex布局的三个属性:flex-grow、flex-shrink、flex-basis,希望对大家有所帮助!

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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전

PhpStorm 맥 버전

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

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경