왼쪽은 고정, 오른쪽은 적응형 레이아웃-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

왼쪽은 고정, 오른쪽은 적응형 레이아웃

php中世界最好的语言

Mar 22, 2018 pm 03:22 PM

오른쪽 공들여 나열한 것

이번에는 고정 왼쪽 레이아웃과 적응형 오른쪽 레이아웃 방법에 대해 소개하겠습니다. 고정 왼쪽 레이아웃과 적응형 오른쪽 레이아웃 방법의 주의사항은 무엇인가요?

첫 번째 방법:

<!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의 다른 관련 기사에 주목하세요. 중국사이트!

핫 AI 도구

Video Face Swap

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

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7683

자바 튜토리얼

1639

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1286

PHP 튜토리얼

1229

Related knowledge

Windows 11: 시작 레이아웃을 가져오고 내보내는 쉬운 방법 Aug 22, 2023 am 10:13 AM

Windows 11에서는 시작 메뉴가 다시 디자인되었으며 시작 메뉴에 폴더, 앱 및 앱이 있었던 이전 버전과 달리 페이지 그리드에 배열된 단순화된 앱 세트를 제공합니다. 시작 메뉴 레이아웃을 사용자 정의하고 다른 Windows 장치로 가져오거나 내보내 원하는 대로 개인화할 수 있습니다. 이 가이드에서는 Windows 11에서 기본 레이아웃을 사용자 지정하기 위해 시작 레이아웃을 가져오는 단계별 지침을 설명합니다. Windows 11의 Import-StartLayout이란 무엇입니까? 시작 레이아웃 가져오기는 Windows 10 및 이전 버전에서 시작 메뉴에 대한 사용자 지정을 가져오기 위해 사용되는 cmdlet입니다.

Windows 11에서 바탕 화면 아이콘 위치 레이아웃을 저장하는 방법 Aug 23, 2023 pm 09:53 PM

Windows 11은 사용자 경험 측면에서 많은 것을 제공하지만 반복이 완전히 오류로부터 안전한 것은 아닙니다. 사용자는 때때로 문제에 직면하며 아이콘 위치 변경이 일반적입니다. 그렇다면 Windows 11에서 데스크톱 레이아웃을 저장하는 방법은 무엇입니까? 현재 창의 화면 해상도를 저장하든 데스크탑 아이콘 배열을 저장하든 관계없이 이 작업을 위한 내장 솔루션과 타사 솔루션이 있습니다. 이는 데스크탑에 많은 아이콘이 있는 사용자에게 더욱 중요해집니다. Windows 11에서 바탕 화면 아이콘 위치를 저장하는 방법을 알아보려면 계속 읽어보세요. Windows 11에서 아이콘 레이아웃 위치를 저장하지 않는 이유는 무엇입니까? Windows 11이 바탕 화면 아이콘 레이아웃을 저장하지 않는 주요 이유는 다음과 같습니다. 디스플레이 설정 변경: 일반적으로 디스플레이 설정을 수정하면 구성된 사용자 지정이

바탕화면 오른쪽 창에 Win7 작업 표시줄이 표시되면 어떻게 해야 하나요? Jun 29, 2023 pm 07:41 PM

바탕화면 오른쪽 창에 Win7 작업 표시줄이 표시되면 어떻게 해야 하나요? 일반적인 상황에서는 기본적으로 작업 표시줄이 화면 하단에 있지만 최근 일부 Win7 사용자는 컴퓨터를 켰을 때 작업 표시줄이 화면 오른쪽 창으로 이동한 것을 발견했습니다. 그래서 다시 변경할 수 있는 방법이 있습니까? ? 자세한 조작 방법을 모르는 친구들이 많습니다. 아래 편집기는 바탕 화면 오른쪽 창에 표시되는 Win7 작업 표시줄 문제를 해결하기 위한 단계를 정리했습니다. 관심이 있으시면 편집기를 따라가 보세요. 아래를보세요! Win7 작업 표시줄이 바탕 화면 오른쪽 창에 표시됩니다. 해결 단계 1. 먼저 아래 그림과 같이 바탕 화면 오른쪽 창에서 작업 표시줄을 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다. 2. 열린 작업 표시줄 및 속성 창에서 화면의 작업 표시줄을 클릭하세요. 하단 위치를 선택하고 작업 표시줄 잠금을 체크한 후 클릭하세요.

WordPress 웹 페이지 정렬 문제 해결 가이드 Mar 05, 2024 pm 01:12 PM

잘못 정렬된 WordPress 웹 페이지 해결 가이드 WordPress 웹 사이트 개발 시 때로는 웹 페이지 요소가 잘못 정렬되는 경우가 있습니다. 이는 다양한 장치의 화면 크기, 브라우저 호환성 또는 부적절한 CSS 스타일 설정 때문일 수 있습니다. 이러한 잘못된 정렬을 해결하려면 문제를 주의 깊게 분석하고, 가능한 원인을 찾아 단계별로 디버그하고 복구해야 합니다. 이 문서에서는 몇 가지 일반적인 WordPress 웹 페이지 정렬 문제와 해당 솔루션을 공유하고 개발에 도움이 되는 특정 코드 예제를 제공합니다.

HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법 Oct 20, 2023 pm 04:24 PM

HTML 및 CSS를 사용하여 반응형 회전판 레이아웃을 만드는 방법 회전판은 현대 웹 디자인의 일반적인 요소입니다. 사용자의 관심을 끌고, 여러 콘텐츠나 이미지를 표시하고, 자동으로 전환할 수 있습니다. 이 글에서는 HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법을 소개합니다. 먼저 기본 HTML 구조를 만들고 필요한 CSS 스타일을 추가해야 합니다. 다음은 간단한 HTML 구조입니다: <!DOCTYPEhtml&g

H5의 위치 속성의 유연한 적용 기술 Dec 27, 2023 pm 01:05 PM

H5에서 위치 속성을 유연하게 사용하는 방법 H5 개발에서는 요소의 위치 지정 및 레이아웃이 관련되는 경우가 많습니다. 이때 CSS 위치 속성이 작동하게 됩니다. 위치 속성은 상대 위치 지정, 절대 위치 지정, 고정 위치 지정 및 고정 위치 지정을 포함하여 페이지에서 요소의 위치 지정을 제어할 수 있습니다. 이번 글에서는 H5 개발에서 position 속성을 유연하게 활용하는 방법을 자세히 소개하겠습니다.

win7의 창 배치 방법 소개 Dec 26, 2023 pm 04:37 PM

동시에 여러 창을 열 때 win7에는 여러 창을 서로 다른 방식으로 배열한 다음 동시에 표시하는 기능이 있어 각 창의 내용을 더 명확하게 볼 수 있습니다. 그렇다면 win7에는 몇 개의 창 배열이 있나요? 편집기를 통해 살펴보겠습니다. Windows 7 창을 정렬하는 방법에는 여러 가지가 있습니다. 세 가지, 즉 계단식 창, 스택형 디스플레이 창, 병렬 디스플레이 창입니다. 여러 창을 열 때 작업 표시줄의 빈 공간을 마우스 오른쪽 버튼으로 클릭하면 됩니다. 세 가지 창 배열을 볼 수 있습니다. 1. 계단식 창: 2. 누적형 디스플레이 창: 3. 나란히 표시되는 창: