简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

왼쪽은 고정, 오른쪽은 적응형

高洛峰
풀어 주다： 2017-02-24 13:39:04
원래의
1130명이 탐색했습니다.

이 글에서는 고정된 왼쪽과 적응적인 오른쪽의 두 가지 구현 방법을 주로 소개합니다. 웹 페이지 레이아웃을 배우는 데 많은 도움이 될 것입니다.

첫 번째 방법: 

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第一种方法</p>
</body>
</html>
로그인 후 복사

두 번째 방법: 

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第二种方法</p>
</body>
</html>
로그인 후 복사

더 많은 왼쪽 고정 및 오른쪽 적응 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨：
固定 自适应
원천：php.cn
이전 기사：수평 및 수직 절대 위치 요소를 중앙에 배치하는 방법 다음 기사：부채꼴 애니메이션 메뉴 예제의 CSS3 구현
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Laravel 8 - /{editable_text} 경로를 /{user} 경로로 리디렉션하는 방법 사용자 프로필로 연결되는 리디렉션 경로를 만들려고 했습니다. 리디렉션 경로는 사용자 데이터베이스의 문자열/텍스트여야 하며 동일한 사용자 프로필 페이지로 리디렉션되...
에서 2024-04-06 17:26:11
0
1
410
Chart.zoom() 호출 후 X축 해제: 단계별 가이드 스크롤 전략을 setScrollStrategy(AxisScrollStrategies.progressive)로 설정했고 로드된 페이지에서 데이터가 매우 빠르게 들어...
에서 2024-04-04 23:40:56
0
1
1339
애플리케이션의 모든 관리자에게 사용자 정의 "css" 및 "js" 파일을 효과적으로 적용하는 방법은 무엇입니까? 사용자 정의 CSS 및 js 파일인 admin.py와 재정의된 base.html이 template/admin/app1/에 다음과 같이 있습니다: django-pr...
에서 2024-04-03 20:54:06
0
1
400
CSS 행 클래스는 특정 요소를 프레임 밖으로 내보내는 동시에 정적이고 디스플레이 하단에 고정되어야 합니다. 현재 내 페이지는 다음과 같습니다. 두 요소가 서로 옆에 있도록 행 클래스를 추가한 후 하단 탐색 모음이 스크롤해야 하는 위치로 푸시됩니다. 여기에서 행 요소가 ...
에서 2024-04-03 18:48:12
0
1
281
제목 뒤에 확장 아이콘이 있는 사용자 정의 패드 확장 for 루프 내부에 매트 확장 패널이 있는 매트 아코디언을 만들려고 합니다. 문제는 각 확장 프로그램 앞에 확인란을 추가하는 등 몇 가지 사용자 정의를 해야 하고...
에서 2024-04-02 12:39:50
0
1
381
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！