찾다
웹 프론트엔드CSS 튜토리얼float_CSS/HTML 없이 모듈 센터 레이아웃 구현

float_CSS/HTML 없이 중앙 모듈 레이아웃 달성

가장 일반적이고 실용적인 레이아웃 형식: 상단, 중앙 왼쪽, 중앙 오른쪽 및 하단 4개 모듈, 너비 760px, 전체 페이지 중앙.

구조 코드, 상단 왼쪽 오른쪽 4개의 모듈은 모두 독립적이며 서로 중첩되지 않습니다.

<p id="top">head</p>
<p id="left">  <p id="left_module">left</p></p>
<p id="right">  <p id="right_module">right</p></p>
<p id="foot" >foot</p>

상단 부분이 일반적인 정의에 속합니다.

#top { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

방법 A: 외부 왼쪽은 760px 너비와 중앙에 정의됩니다. 내부 left_module은 280px의 실제 왼쪽 너비로 정의되고 절대 위치에 있으며 상단 값은 높이와 같습니다. 상단에 정의되어 있습니다.
이 방법의 장점은 왼쪽과 오른쪽 두 모듈의 코드 조각을 교환하여 표시 우선순위를 조정할 수 있다는 것입니다.

#left { width:760px; margin:auto;}
  #left_module { width:280px; position:absolute; top:100px; padding:10px;}

방법 B: 외부 왼쪽은 760px 너비로 중앙에 위치하며 상단을 기준으로 부동으로 정의됩니다. 내부 left_module은 280px의 실제 왼쪽 너비로 정의되며 절대적 위치에 있습니다.
이 방법의 장점은 상단 높이를 자유롭게 늘릴 수 있다는 것입니다.

#left { width:760px; margin:auto; position:relative;}
  #left_module { width:280px; position:absolute; padding:10px;}

바깥쪽 오른쪽은 760px 너비 및 중앙 정렬로 정의되며 내부 right_module은 440px의 실제 오른쪽 너비로 정의되며 여백 구문을 사용하여 왼쪽 중앙에 정렬됩니다. right_module에 정의된 배경색은 실제 오른쪽 배경색이고, 정의된 높이는 중간 모듈의 실제 높이입니다. 오른쪽 배경색은 실제 왼쪽 배경색입니다.

#right { width:760px; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

Bottom도 기존의 정의에 속합니다.

#foot { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

테스트 환경인 IE6.0과 FF1.5는 가장 저속한 구문을 가지고 있어 매우 단순하고 실용성이 제한되어 있습니다.

위는 float 없이 모듈센터layout_CSS/HTML을 구현한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. !


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

회전 목마/슬라이드 쇼를 구축 할 때 HTML과 CSS가 얼마나 멀리 데려 갈지 놀랍습니다.

2020 년 웹 : 확장 성 및 상호 운용성2020 년 웹 : 확장 성 및 상호 운용성Apr 12, 2025 am 10:46 AM

지난 몇 년 동안 우리는 웹 기술과 관련하여 많은 변화와 전환을 보았습니다. 2020 년에 나는 우리를 웹 커뮤니티로 향하는 것을 예견합니다.

데스크탑 및 모바일 용 HTML이 다른 웹 구성 요소데스크탑 및 모바일 용 HTML이 다른 웹 구성 요소Apr 12, 2025 am 10:43 AM

Christian Schaefer는 웹 광고를 다루는 것에 대해 큰 글을 쓰고 있습니다. 모든 것은 흥미 롭습니다. 먼저 모든 과제를 문서화합니다.

CSS의 최고의 색상 기능?CSS의 최고의 색상 기능?Apr 12, 2025 am 10:33 AM

나는 HSL이 우리가 가진 최고의 색상 형식이라고 전에 말했다. 우리 대부분은 16 진 코드를 읽을 수있는 David Desandro와 같은 것입니다. HSL (a)는 색조, 채도,

EdgiumEdgiumApr 12, 2025 am 10:32 AM

2020 년 1 월 15 일은 Microsoft Edge가 Chromium으로 향한 날이었습니다. 브라우저 엔진 다양성 감소. 강력한 주장이 있습니다.

'이 모든 일은 할 수있는 일이 매우 쉽습니다. 그들은 앉아서 웹 사이트를 통과 할 사람이 필요합니다.''이 모든 일은 할 수있는 일이 매우 쉽습니다. 그들은 앉아서 웹 사이트를 통과 할 사람이 필요합니다.'Apr 12, 2025 am 10:31 AM

나는 영국의 Channel 5 News에서 트위터에 게시 된 비디오를 보았습니다.

Jamstack vs. JamstackJamstack vs. JamstackApr 12, 2025 am 10:30 AM

클라이언트 측 코드를 사용하는 동안 정적으로 할 수있는만큼의 서비스를 제공하고 그 이후의 모든 요구에 대해 서버리스 API를 치는 아이디어를 불러 일으키는 아이디어를 불러 일으키는 단어 일뿐입니다.

비즈니스 아빠비즈니스 아빠Apr 12, 2025 am 10:29 AM

Shoptalk 및 Codepen Radio의 팟 캐스트 편집자 인 Chris Enns에게 축하합니다. Alexis Ohanian,

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를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SecList

SecList

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

DVWA

DVWA

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

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음