CSS 음수 여백을 사용하여 적응형 너비 유동 레이아웃을 만드는 방법

이 글에서는 CSS 네거티브 마진을 사용하여 적응형 너비 유동 레이아웃을 만드는 구현 방법을 주로 소개합니다. 이제 특정 참조 값이 있으므로 이를 참조할 수 있습니다.

네거티브 마진 기술의 합리적인 사용 , 브라우저 너비에 맞춰 조정되는 유동 레이아웃과 같은 많은 흥미로운 레이아웃을 만드는 데 도움이 될 수 있습니다.

이러한 유형의 레이아웃을 생성하기 위해 음수 여백을 사용하는 방법에 대한 외국 기술 문서에서 제가 본 최초의 문서는 2004년에 A List Apart에 게시된 Ryan Brill의 "Creating Liquid Layouts with Negative Margins"였습니다(2004 - -! 국내 소수 의 사람들이 이제 막 WEB 표준화에 관심을 갖기 시작했습니다.) 이 기사는 이에 대한 중국어 설명 버전으로도 볼 수 있습니다.

더 크고 더 큰 브라우저의 출현과 인기로 인해 웹 사이트 인터페이스가 다양한 해상도를 가진 브라우저 사용자의 탐색 요구를 어떻게 충족시킬 수 있는지가 점차 프런트 엔드 개발 엔지니어가 직면해야 하는 문제가 되었습니다. 현재 많은 국내 포털이 개정되어 약 960px의 현재 주류 너비를 채택하고 있습니다.

덜 복잡한 웹사이트의 경우 아키텍처에 백분율을 사용하는 것이 좋은 생각이라고 생각합니다. 포럼 페이지, 블로그 페이지 등과 같은 적응형 레이아웃을 위한 응용 프로그램이 여전히 많이 있습니다. 과거에는 이러한 유형의 아키텍처에 테이블을 사용했습니다. 그러나 실제로는 매우 작은 기술을 사용하여 WEB 표준화를 준수하는 적응형 레이아웃을 만드는 것이 가능합니다.

여기에 필요한 핵심 기술 사항은 단 하나뿐입니다. 바로 음수 마진입니다.

【간단한 레이아웃】

OK. 지금 시작합시다. 이제 블로그의 프런트 데스크를 다시 만들어야 한다고 가정해 보겠습니다. 인터페이스 디자인은 완료되었지만 코드 구조는 없습니다. 우리는 블로그 인터페이스가 이를 수행할 수 있기를 바랍니다. 왼쪽의 주요 부분은 다양한 해상도에서 브라우저의 너비에 적응해야 하는 블로그 게시물 콘텐츠이고, 오른쪽은 우리가 수정하려는 사이드바입니다. 250px 너비, 예상되는 렌더링은 다음과 같습니다.

이것은 일반적인 2열 레이아웃입니다. 예비 구조를 만들어 보겠습니다

인용:

<p id=”header”>顶部区域</p>
<p id=”mainer”>
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
</p>
<p id=”sideBar”>
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</p>
<p id=”footer”>底部区域</p>

보기

테스트 페이지 1, 스타일 시트가 없습니다. 페이지의 표시 효과. 기본 스타일 시트를 추가해 보겠습니다

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다

인용문:

body,p,h1,h2,ul {
margin:0;padding:0;
}
#header {
background-color: #A8A754;
}
#footer {
background-color: #A8A754;
clear: both;
}
#mainer {
width: 100%;
margin-right: -250px;
float: left;
}
#sideBar {
float: right;
width: 250px;
}

메인 페이지의 오른쪽 여백을 -250px로 정의하여 사이드바 너비를 조정할 수 있습니다. 오른쪽에 비우려면 사이드바를 배치하세요. 스타일 시트 페이지를 추가하려면

테스트 페이지 2을 참조하세요. 자, 이제 왼쪽 콘텐츠 영역에서 사이드바에 해당하는 공간이 비워져 사이드바가 표시되어야 하는 위치에 배치된 것을 볼 수 있습니다.

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다

【겹치는 부분 제거】

왼쪽의 텍스트 내용이 사이드바와 겹치는 것을 볼 수 있습니다. 이때 왼쪽 텍스트 부분이 사이드바와 겹치지 않도록 오른쪽 여백을 충분히 크게 설정하려면 또 다른 p 레이어가 필요합니다. 그리고 왼쪽 콘텐츠 부분과 사이드바 부분의 배경색을 다르게 설정하여 구분해 보세요.

인용문:

<p id=”mainer”>
<p id=”main”>
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
</p>
</p>

추가된 CSS

인용문:

#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}

View

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다

【적응 높이】

이때 우리는 다시 발견했습니다. 문제가 있습니다. 왼쪽의 길이가 계속해서 늘어나면 오른쪽 사이드바 하단에 빈 공간이 생깁니다. 우리는 왼쪽과 오른쪽 열의 시각적 적응형 동일한 높이를 달성하기를 희망합니다.

여기서 외부 메인 p에 대해 오른쪽 정렬되고 수직으로 반복되는 정적 이미지를 설정할 수 있습니다. 이미지 너비를 같은 쪽의 사이드바와 동일한 너비인 250px로 설정했습니다.

우리는

인용문에

Quote를 추가합니다:

#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}

대부분의 경우 전체 너비를 브라우저 너비로 설정하고 싶지 않고, 대부분의 경우 다음과 같이 설정합니다. 화면 너비보다 작은 백분율입니다. 이 경우 왼쪽 콘텐츠와 오른쪽 사이드바 외부에 또 다른 p 레이어를 추가하고 사이드바 아래에 명확한 플로팅 레이어를 추가하여 목표를 달성할 수 있습니다. 현재 XHTML은 다음과 같습니다.

인용문:

  <p id=”header”>顶部区域</p>
    <p id=”wrapper” class=”mid”>
    <p id=”mainer”>
    <p id=”main”>
    <h1>使用负边距创建自适应宽度的流体布局</h1>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    </p>
    </p>
    <p id=”sideBar”>
    <h2>最新文章</h2>
    <ul>
    <li>最新文章一</li>
    <li>最新文章二</li>
    <li>最新文章三</li>
    </ul>
    </p>
    <p class=”clear”></p>
    </p>
    <p id=”footer”>底部区域</p>

해당 CSS

인용문:

#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}

View

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다

Ryan Brill은 그의 기사에서 외부 래퍼와 내부 메인이 2개라고 말했습니다. IE에서 버그를 해결하려면 배경 배경을 설정해야 합니다. 그런데 여기서는 메인 p의 배경만 설정했고, IE6, IE7, FF에서는 오류가 발견되지 않았습니다. 어쩌면 그는 여기에서 무시된 IE5.x를 언급하고 있을 수도 있습니다.

【고급 3열 레이아웃】

위의 방법을 익히고 나면 3열 레이아웃을 만드는 것도 매우 간단하다는 것을 알게 될 것입니다! 좋아요. 위의 예를 변경해 보겠습니다. 양쪽에는 고정 너비가 있고 가운데에는 가변 너비가 있는 3열 레이아웃이 필요합니다. 이것은 약간의 p만 추가하면 됩니다.

🎜인용문:🎜

    <p id=”header” class=”mid”>顶部区域</p>
    <p id=”wrapper” class=”mid”>
    <p id=”mainer”>
    <p id=”main”>
    <p id=”leftBar”>
    <h2>栏目标题</h2>
    <ul>
    <li>文章标题</li>
    <li>文章标题</li>
    <li>文章标题</li>
    </ul>
    </p>
    <p id=”inmain”>
    <h1>使用负边距创建自适应宽度的流体布局</h1>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    </p>
    </p>
    </p>
    <p id=”sideBar”>
    <h2>最新文章</h2>
    <ul>
    <li>最新文章一</li>
    <li>最新文章二</li>
    <li>最新文章三</li>
    </ul>
    </p>
    <p class=”clear”> </p>
    </p>
    <p id=”footer” class=”mid”>底部区域</p>

以及另外一个背景图片

CSS部分增加：

引用:

#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}

现在来看看我们的页面。 

提示：您可以先修改部分代码再运行

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何利用CSS实现标题文字过长部分显示省略号

如何使用css实现任意大小及任意方向和任意角度的箭头

关于css实现右侧固定宽度和左侧宽度的自适应方法

위 내용은 CSS 음수 여백을 사용하여 적응형 너비 유동 레이아웃을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!