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

CSS左右固定，中间填满布局_html/css_WEB-ITnose

WBOY
풀어 주다： 2016-06-24 11:36:51
원래의
1279명이 탐색했습니다.

先上个高清无码图：


源码： 

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <link href="reset.css" rel="stylesheet" /> <!--重置默认样式,你可以把这句注释掉-->    <style>        div {            line-height:60px; /*让字体垂直居中*/        }        div.box {            width: 100%;            height: 60px;            background: yellow;            text-align: center; /*让字体水平居中*/            color: white;        }            div.box div.left, div.right {                width: 60px;                height: 60px;                background: red;                            }            div.box div.left {                float: left;            }            div.box div.right {                float: right;            }            div.box div.center {                height: 60px;                background: green;                           }    </style></head><body>    <div class="box">        <div class="left">左固定</div>        <div class="right">右固定</div>        <div class="center">中间填满</div>          </div></body></html>
로그인 후 복사



관련 라벨：
CSS左右固定，中间填满布局
원천：php.cn
이전 기사：可自定义配置箭头的CSS3气泡提示框_html/css_WEB-ITnose 다음 기사：html-1_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
제목 변경: 고정 div 열 및 나머지 너비 모든 열이 브라우저 창의 전체 높이가 되는 5열 레이아웃을 만들려고 합니다. 중간 열을 제외한 나머지 열은 브라우저/문서 스크롤 시 고정되어 움직이지 않아야 합니...
에서 2023-09-14 17:17:47
0
1
299
div 높이를 제한하는 프로젝트 구현 방법 중간 열의 높이 일부에 문제가 있는 3열 레이아웃이 있습니다. 일반적으로 말하자면 채팅 애플리케이션입니다. 클래스 이름은 다음과 같습니다. 이 세 개의 열을 포함...
에서 2023-09-13 20:46:45
0
1
204
오버플로 시 그리드 열 크기 조정 지연 고정 위치 지정을 사용하여 브라우저 뷰포트를 채우는 2×2 CSS 그리드가 있습니다. 다음과 같습니다:------||xxxxxxxxxxxxx|----|x|||x ...
에서 2023-09-06 21:25:59
0
1
252
왼쪽에 고정된 이미지, 오른쪽에 버튼, 가운데 또는 가운데 텍스트가 있는 레이아웃을 만듭니다. 왼쪽에는 이미지, 가운데에는 텍스트, 오른쪽에는 버튼이 포함된 음식 주문 레이아웃을 만들고 있습니다. 이미지는 왼쪽에 고정되어 있지만, 버튼은 가운데 텍스트 길이...
에서 2023-09-04 21:02:34
0
1
183
CSS를 사용하여 남은 수직 공간을 채우려면 display:flex를 사용하세요. 3행 레이아웃에서: 맨 위 행은 내용에 따라 크기가 조정되어야 합니다. 맨 아래 행은 고정된 높이(픽셀)를 가져야 합니다. 중간 행은 컨테이너를 채울 수 있도록 ...
에서 2023-08-23 22:23:14
0
2
236
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！