Comment créer une mise en page fluide à largeur adaptative à l'aide de marges négatives CSS

Cet article présente principalement la méthode d'implémentation consistant à utiliser la marge négative CSS pour créer une mise en page fluide à largeur adaptative. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. L'utilisation raisonnable de la technologie des marges négatives peut nous aider à créer de nombreuses mises en page intéressantes, telles que des mises en page fluides qui s'adaptent à la largeur du navigateur.

Pour les documents techniques étrangers sur l'utilisation de marges négatives pour créer ce type de mise en page, le premier que j'ai vu était "Creating Liquid Layouts with Negative Margins" de Ryan Brill publié sur A List Apart en 2004 (2004 - -! Un petit nombre de personnes en Chine commencent tout juste à s'intéresser à la normalisation du WEB.) Cet article peut également être considéré comme une version explicative en chinois.

Avec l'émergence et la popularité de navigateurs de plus en plus grands, la manière dont l'interface du site Web peut répondre aux besoins de navigation des utilisateurs de navigateurs avec différentes résolutions est progressivement devenue un problème auquel les ingénieurs de développement front-end doivent faire face. À l'heure actuelle, de nombreux portails nationaux ont été révisés et ont adopté la largeur courante actuelle d'environ 960 px.

Je pense que pour les sites Web moins complexes, utiliser des pourcentages pour l'architecture est une bonne idée. Il existe encore de nombreuses applications pour la mise en page adaptative, comme les pages de forum, les pages de blog, etc. Autrefois, nous utilisions des tables pour ce type d'architecture. Cependant, il est effectivement possible de créer une mise en page adaptative conforme à la standardisation WEB en utilisant de très petites techniques.

Un seul point technique clé est nécessaire ici : les marges négatives.

【Mise en page simple】

OK. Commençons maintenant. Supposons que vous ayez maintenant besoin de recréer la réception de votre blog. La conception de l'interface est terminée et il ne reste plus que la structure du code. Nous espérons que l'interface du blog pourra le faire : la partie principale à gauche est le contenu des articles de blog, qui doit s'adapter à la largeur du navigateur sous différentes résolutions et la partie droite est la barre latérale, que nous voulons fixer ; 250px de Largeur, le rendu attendu est le suivant :

Il s'agit d'une disposition typique à deux colonnes, faisons une structure préliminaire

Citation :

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

Vue

Test Page 1, c'est l'effet d'affichage de la page sans feuille de style. Ensuite on y ajoute une feuille de style de base

Astuce : Vous pouvez modifier une partie du code avant d'exécuter

Citation :

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

Définissez la marge droite du mainer à -250px, afin que la largeur de la barre latérale puisse être libérée sur le côté droit pour placer la barre latérale. Pour ajouter la page de feuille de style, veuillez consulter la

Page de test 2. OK, nous voyons maintenant que la zone de contenu sur la gauche a libéré l'espace correspondant pour la barre latérale, afin que la barre latérale soit placée là où elle devrait apparaître.

Astuce : Vous pouvez modifier une partie du code avant d'exécuter

[Supprimer les parties qui se chevauchent]

À ce stade, nous constaterons que le texte contenu sur la gauche Une partie de celui-ci chevauche la barre latérale. À ce stade, nous avons besoin d'un autre calque p pour définir une marge droite suffisamment grande pour la partie de texte gauche afin qu'elle ne chevauche pas la barre latérale. Et définissez différentes couleurs d’arrière-plan pour la partie de contenu gauche et la partie de la barre latérale afin de les distinguer.

Citation :

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

CSS ajouté

Citation :

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

Afficher

Astuce : Vous pouvez modifier une partie du code avant d'exécuter

[Hauteur adaptative]

À ce moment-là, nous avons découvert un autre problème : si laissé Si le la longueur du côté continue d’augmenter, il y aura alors un espace vide en bas de la barre latérale droite. Nous espérons obtenir une hauteur égale et adaptative visuelle des colonnes de gauche et de droite.

Ici, nous pouvons définir une image statique arrière alignée à droite et répétée verticalement pour le p principal externe. Nous définissons la largeur de l'image à 250 px, ce qui est la même largeur que la barre latérale.

Nous ajoutons

à la partie CSS :

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

La plupart du temps, nous ne voulons pas définir l'intégralité width à la largeur du navigateur, la plupart du temps nous fixerons un pourcentage inférieur à la largeur de l'écran. Dans ce cas, nous pouvons ajouter un calque p en dehors du contenu de gauche et de la barre latérale droite, et ajouter un calque flottant clair sous la barre latérale pour atteindre notre objectif. À ce stade, notre XHTML ressemblera à ceci.

Citation :

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

Citation :

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

Affichage

Astuce : Vous pouvez d'abord le modifier Exécutez à nouveau une partie du code

Ryan Brill a déclaré dans son article que le wrapper externe et le mainer interne devraient définir un arrière-plan afin de résoudre un BUG dans IE. Mais j'ai uniquement défini l'arrière-plan de mainer p ici, et aucune erreur n'a été trouvée dans IE6, IE7 et FF. Peut-être qu'il fait référence à IE5.x, qui est ignoré ici.

[Mise en page avancée à trois colonnes]

Après avoir maîtrisé les méthodes ci-dessus, nous constaterons que créer une mise en page à trois colonnes est également très simple ! D'ACCORD. Changeons l'exemple ci-dessus. Nous avons besoin d'une disposition à trois colonnes, avec une largeur fixe sur les deux côtés et une largeur adaptative au milieu. Cela nécessite seulement d'ajouter un peu de p.

Citation :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!