How to create an adaptive width fluid layout using css negative margins

This article mainly introduces the implementation method of using css negative margin to create an adaptive width fluid layout. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Reasonable use of negative margin technology can help us create many interesting layouts, such as fluid layouts that adapt to the width of the browser.

For foreign technical documents on using negative margins to create this type of layout, the earliest one I saw was "Creating Liquid Layouts with Negative Margins"## published by Ryan Brill on A List Apart in 2004. # (2004 - -! A small number of people in China have just begun to pay attention to WEB standardization). This article can also be regarded as a Chinese explanation version of it.

With the emergence and popularity of larger and larger browsers, how the website interface can meet the browsing needs of browser users with different resolutions has gradually become a problem that front-end development engineers must face. At present, many domestic portals have been revised and adopted the current mainstream width of about 960px.

I think that for less complex websites, using percentages for architecture is a good idea. There are still many applications for adaptive layout, such as forum pages, blog pages, etc. In the past, we used tables for this type of architecture. However, it is actually possible to create an adaptive layout that complies with WEB standardization using very small techniques.

There is only one key technical point needed here: negative margin.

【Simple layout】

OK. Let's start now. Suppose you now need to re-create the front desk for your blog. The interface design has been completed, but the code structure is missing. We hope that the blog interface can do this: the main part on the left is the blog post content, which needs to adapt to the width of the browser under different resolutions; and the right is the sidebar, which we want to make a fixed 250px Width, the expected rendering is as follows:

This is a typical two-column layout, let’s make a preliminary structure

Quote:

<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>

View

Test page one, this is the display effect of the page without a style sheet. Let’s add a basic style sheet to it

Tips: You can modify part of the code before running

Quote:

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;
}

Define the right margin of the mainer to -250px, so that the width of the sidebar can be emptied on the right side to place the sidebar. To add the style sheet page, please see

Test Page 2. OK, now we see that the content area on the left has cleared the corresponding space for the sidebar, so that the sidebar is placed where it should appear.

Tips: You can modify part of the code first and then run it

[Remove overlapping parts]

We will find at this time that the text content on the left Part of it overlaps with the sidebar. At this time, we need another p layer to set a large enough right margin for the left text part so that it does not overlap with the sidebar. And set different background colors for the left content part and the sidebar part to distinguish them.

Quote:

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

Added CSS

Quote:

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

View

Tips: You can modify part of the code before running

[Adaptive height]

At this time we discovered another problem: if the length of the left side continues to lengthen , then a blank space will appear in the lower part of the right sidebar. We hope to achieve visual adaptive equal height of the left and right columns.

Here we can set a right-aligned and vertically repeated back static image for the outer mainer p. We set the width of the image to 250px, which is the same width as the sidebar on the same side.

We add

to the CSS part:

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

Most of the time we don’t want to set the entire width to the width of the browser. Sometimes we will set a percentage smaller than the screen width. In this case, we can add a p layer outside the left content and right sidebar, and add a clear floating layer under the sidebar to achieve our goal. At this time our XHTML will look like this.

Quote:

  <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>

Corresponding CSS

Quote:

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

View

Tip: You can modify part of the code before running it

Ryan Brill said in his article that both the outer wrapper and the inner mainer should set a background background in order to solve a BUG in IE. But I only set the background of mainer p here, and no errors were found in IE6, IE7, and FF. Maybe he is referring to IE5.x, which is ignored here.

[Advanced, three-column layout]

After mastering the above methods, we will find that making a three-column layout is also very simple! OK. Let's change the above example. We need a three-column layout, with fixed width on the two sides and adaptive width in the middle. This only requires adding a little p.

Quote:

    <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实现右侧固定宽度和左侧宽度的自适应方法

The above is the detailed content of How to create an adaptive width fluid layout using css negative margins. For more information, please follow other related articles on the PHP Chinese website!