ホームページ > 記事 > ウェブフロントエンド > CSS の負のマージンを使用して適応幅の流動的なレイアウトを作成する方法

CSS の負のマージンを使用して適応幅の流動的なレイアウトを作成する方法

不言オリジナル: 2018-06-21 16:21:081487ブラウズ

この記事では、CSS のネガティブマージンを使用して適応的な幅の流体レイアウトを作成する実装方法を主に紹介します。必要な友人に参考にしてください。、ブラウザの幅に適応する流動的なレイアウトなど、多くの興味深いレイアウトを作成するのに役立ちます。

このタイプのレイアウトを作成するために負のマージンを使用することに関する外国の技術文書について、私が見た最も古いものは、2004 年に A List Apart に掲載された Ryan Brill の

「Creating Liquid Layouts with Negative Margins」でした (2004 - -! 国内では少数です)の人々がWEB標準化に注目し始めている）であり、この記事はその中国語解説版とも言えます。

ますます大規模なブラウザの出現と人気に伴い、Web サイトのインターフェイスがさまざまな解像度のブラウザユーザーの閲覧ニーズにどのように対応できるかが、フロントエンド開発エンジニアが直面しなければならない問題になりつつあります。現在、国内のポータルの多くは改訂され、現在主流の960px程度の横幅を採用しています。

それほど複雑でないウェブサイトの場合は、アーキテクチャにパーセンテージを使用するのが良い考えだと思います。フォーラムページやブログページなど、アダプティブレイアウト用のアプリケーションはまだ数多くあります。以前は、このタイプのアーキテクチャにはテーブルを使用していました。しかし、実は非常に小さなテクニックを使うだけで、WEB標準化に準拠したアダプティブレイアウトを作成することが可能です。

ここで必要となる重要な技術的ポイントは 1 つだけです、それはマイナスのマージンです。

【シンプルなレイアウト】

OK。今すぐ始めましょう。ここで、ブログのフロントデスクを再作成する必要があるとします。インターフェイスの設計は完了しましたが、コード構造が欠落しています。ブログのインターフェースがこれを実現できることを願っています。左側のメイン部分はブログ投稿のコンテンツであり、さまざまな解像度でブラウザの幅に適応する必要があり、右側は固定したいサイドバーです。幅 250 ピクセル、予想されるレンダリングは次のとおりです:

これは典型的な 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

を参照してください。 OK、左側のコンテンツ領域がサイドバーに対応するスペースをクリアし、サイドバーが表示されるべき場所に配置されたことがわかります。

ヒント: 実行前にコードの一部を変更できます

【重なっている部分を削除する】

左側のテキストコンテンツがサイドバーと重なっていることがわかります。このとき、左側のテキスト部分がサイドバーと重ならないように、十分な大きさの右マージンを設定するために、別の p レイヤーが必要です。そして、左側のコンテンツ部分とサイドバー部分を区別するために、異なる背景色を設定します。

Quote:

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

CSSを追加しました

Quote:

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

View

ヒント: 実行前にコードの一部を変更できます

【適応高さ】

この時点で発見しましたまたまた問題があります。左側の長さが増加し続けると、右側のサイドバーの下部に空白のスペースができてしまいます。視覚的に適応的に左右の列の高さが同じになるようにしたいと考えています。

ここでは、外側のメイン p に右揃えで垂直に繰り返されるバック静的画像を設定できます。画像の幅を、同じ側のサイドバーと同じ幅の 250px に設定します。

Quote に

Quote を追加します:

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

ほとんどの場合、幅全体をブラウザの幅に設定したくなく、次のように設定します。画面の幅よりも小さいパーセンテージで表示されます。この場合、左側のコンテンツと右側のサイドバーの外側に p レイヤーを追加し、サイドバーの下に透明なフローティングレイヤーを追加して目的を達成できます。現時点での XHTML は次のようになります。

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>

対応するCSS

Quote:

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

View

ヒント: 実行前にコードの一部を変更できます

Ryan Brill氏は記事の中で、外側のラッパーと内側のメインナーはそれぞれ2つあると述べていますIE のバグを解決するには、背景を設定する必要があります。ただし、ここでは mainer 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 の負のマージンを使用して適応幅の流動的なレイアウトを作成する方法

関連記事