집 > 기사 > 웹 프론트엔드 > CSS 적응형 레이아웃: CSS 너비 적응을 구현하는 방법은 무엇입니까?

CSS 적응형 레이아웃: CSS 너비 적응을 구현하는 방법은 무엇입니까?

不言원래의: 2018-09-10 14:01:2620463검색

오늘의 웹 페이지 레이아웃은 다양한 화면에 맞게 조정되어야 하므로 웹 페이지의 콘텐츠가 완전히 표시될 수 있도록 조정을 구현해야 합니다. 따라서 오늘의 기사에서는 CSS 너비 조정 콘텐츠에 대해 소개하겠습니다. CSS 적응형 레이아웃에서 CSS 너비 적응을 구현하는 방법에 대해 자세히 이야기해 보겠습니다.

추천 관련 기사:
1.적응력이 뛰어난 CSS를 달성하는 방법은 무엇입니까? CSS 높이를 콘텐츠에 맞게 조정하는 간단한 방법
2.CSS의 일반적인 적응형 레이아웃은 무엇입니까
관련 비디오 권장 사항:
1.CSS 비디오 튜토리얼 - Jade Girl Heart Sutra Edition

왼쪽(또는 오른쪽)이 다음과 같은 페이지를 자주 볼 수 있습니다. 고정 탐색 또는 메뉴 표시줄의 다른 쪽은 브라우저가 확대/축소됨에 따라 크기를 적응적으로 변경합니다. 이는 실제로 너비 적응의 구현입니다.

CSS 너비 적용에는 가장 일반적인 두 가지 구현 방법이 있습니다. 하나는 2열 레이아웃이고 다른 하나는 3열 레이아웃입니다.

이 두 가지 방법을 각각 간략하게 소개하겠습니다.

1. CSS 너비 적응형 2열 레이아웃:

예를 들어 고정 너비가 있는 오른쪽과 적응 너비가 있는 왼쪽을 살펴보겠습니다.

1. 적응 영역은 너비 없이 설정됩니다.

<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>

#sidebar {
  float: right; width: 300px;
}#content {
  margin-right: 300px;
}

참고:

오른쪽은 항상 고정되고 왼쪽은 화면의 나머지 크기에 따라 조정됩니다.

그러나 실제로 이 방법에는 제한이 있습니다. 즉, HTML 구조에서 사이드바가 콘텐츠 앞에 와야 합니다.

2. float와 margin을 함께 사용하세요

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">
    <div class="contentInner">
       自适应区    </div>
  </div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

#content {
  margin-left: -300px; float: left; width: 100%;
}#content .contentInner{
  margin-left:300px;
}#sidebar {
  float: right; width: 300px;
}

설명: 이런 식으로 contentInner의 실제 너비는 화면 너비 -300px입니다.

3. 고정 너비 영역에는 절대 위치 지정을 사용하고 적응 영역에는 여백을 설정합니다.

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  </div>

#wrap{
  position:relative;
}#content {
  margin-right:300px;
}#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}

4. 달성하려면 display:table을 사용하세요.

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

#wrap{
  display:table;
  width:100%;
}#content {
  display:table-cell;
}#sidebar {
 width:300px;
  display:table-cell;
}

참고: 이 방법은 IE7 이하 브라우저와 호환되지 않습니다. IE7 테이블에 대한 표시 설정이 인식되지 않습니다.

2. CSS 너비 적응형 3열 레이아웃:

1. 왼쪽과 오른쪽의 너비가 고정된 3열 레이아웃. middle

    <div class="div0">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>

*{
    padding: 0;
    margin: 0;
}
.div0{
    width: 800px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    margin: 50px auto;
    border: 2px solid #E51414;/*添加边框只为结果更直观*/
}
.left{
    width: 200px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #6E6C8A;
    float: left;/*设为左浮动*/
    text-align: center;
}
.middle{
    width: 430px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #806155;
    float: left;/*设为左浮动*/
    margin: 0 10px 0 10px;/*左右各加10px使得三列之间有间隙*/
    text-align: center;
}
.right{
    width: 150px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #8F9068;
    float: right;/*设为右浮动*/
    text-align: center;
}

지침: 왼쪽 및 오른쪽 div의 너비가 고정되어 있고 가운데 div의 너비를 알 수 없는 경우 플로팅을 사용하여 3열 레이아웃을 구현할 수 없습니다. 3열 레이아웃을 구현하려면 절대 위치 지정을 사용하세요. 왼쪽과 오른쪽 요소를 절대 위치로 설정하고, 가운데 요소의 왼쪽과 오른쪽 여백 값을 각각 오른쪽 요소와 왼쪽 요소의 너비로 설정해야 합니다. . 상위 요소를 래핑하지 않고도 3열 레이아웃을 얻을 수 있습니다. 상위 요소가 있는 경우 상위 요소를 상대 위치로 설정해야 합니다. (위치 지정은 css 매뉴얼을 참조하세요.)