要素を水平に配置する 6 つの方法-CSSチュートリアル-php.cn

要素を水平に配置する 6 つの方法

yulia

リリース： 2018-09-25 11:49:18

オリジナル

15883 人が閲覧しました

ご存知のとおり、ブロックレベルの要素はデフォルトで垂直に配置され、インライン要素は基本的に div やその他の一般的なブロックレベルのタグなどのレイアウトで使用されます。 -レベル要素も配置されますか? 水平方向の配置はどうですか?この記事では、ブロックレベルの要素を水平に配置するための 6 つの方法を紹介します。

#最初のタイプ: display: inline-block

まず、ブロック要素とインライン要素を理解する必要があります

ブロックレベル要素: ブロックレベルの要素には、width height、padding、border、margin が含まれます。一般的なブロックレベルの要素には、div、p、form、ul などが含まれます。

インライン要素: 高さと幅はコンテンツによって決まります。固定サイズを設定することはできません。インライン要素は HTML のすべての要素の大部分を占めます。たとえば、a、span、label、button、img、input...

ここで「Button、img、input ラベルは幅と高さ、マージンとパディングを設定できます。」という疑問を持つ人もいるかもしれません。 . 、なぜ本当にインライン要素なのでしょうか? 「実は、html要素を分ける方法は大きく分けて「ブロックレベル要素とインライン要素」と「置換可能な要素と置換不可能な要素」の2つがあります。最初の分割方法は上で紹介され、2 番目の分割方法は以下で紹介されています。

置換要素: 一般的に理解されているのは、幅と高さの属性を持つ要素です。置換要素は、display:inline-block 要素に似ており、高さ、幅、内側と外側のマージンを設定できます。これらには、主に img、input、textarea、select、object、audio、および Canvas が含まれます。は置換要素です。

非置換要素: 置換要素を除き、残りは非置換要素です (O(∩_∩)O)

多くの無意味な内容を経て、次のことがわかります。 -block can 要素を水平に配置しますが、このレイアウトには少し問題がある可能性があります。例:

<style>
        div{
            display:inline-block;    width:200px;    height:200px;
        }
        .div1{
            background:green;
        }
        .div2{
            background:red;
        }
</style>
<div class = "div1">左边</div>
<div class = "div2">右边</div>

ログイン後にコピー

ここで 2 つの div の間にギャップが見つかりました。これはなぜでしょうか。

ブラウザは、改行、インデント、スペースを 1 つのスペースとして扱います。スペースが 2 つある場合や、改行とスペースが 1 つある場合でも、それらは 1 つのスペースとして解析されます。このスペースのサイズは font-size/2 です。このギャップを解消する方法はたくさんあります。

1. div2 の左マージンを設定します:-font-size/2

2 2 つの div の親タグのフォントサイズを設定します: 0

3. 負の単語間隔を設定します。

Second: float: left/right

float 属性は、要素を通常のドキュメントフローから切り離すことができます。コンテナの左側または右側に横に配置します。

この方法は最もよく使われる方法と言えますが、アダプティブレイアウトでは一般に要素の高さと幅が固定されず、コンテンツのサイズに応じて自動的に調整されるという問題があります。子要素がすべて浮動要素の場合は、高度な崩壊が発生します。

クリの例

<style>
        span{
            float:left;        width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            background:red;
        }
</style>
<div>
    <span class = "box1">左边</span>
    <span class = "box2">右边</span>
</div>

ログイン後にコピー

ここでは、前のクリのサブ要素 div を意図的に span に変更しています。実際、float が要素をブロック要素に暗黙的に変換できることを表現したいのです。 Position:absolute/fixed(もあり)なので、幅と高さを自然に設定できます。

それでは、ボックスを横に並べた後に何が問題になるのでしょうか?それは正しい！親コンテナの高さは折りたたまれています。このとき、親コンテナの div の高さは 0 です。これは、フローティング要素が通常のドキュメントフローから外れ、親コンテナが高さを計算するときに無視するためです。これは私たちが見たくないものです。この高度に折りたたまれた DIV の背後に他の通常のフロータグがある場合、ページが混乱し、その他の望ましくない結果が発生するからです。

フロートをクリアするには、主に 2 つの方法があります。

1.clear:left/right/both。これは、フローティング CSS をクリアするために特別に使用されます。

2.BFC、BFC には「BFC の高さを計算するとき、浮動要素も計算に参加する」というルールがあるためです。

clear を使用してフロートをクリアするいくつかの方法について説明します。

1. 最後の子要素の後に空のタグを追加し、そのスタイルを clear:both に設定します。

#2. 最後のフローティング子要素で、疑似要素::after を使用して、フロートをクリアするクリアスタイルを追加します。

3 番目のタイプ: テーブルレイアウト

このレイアウト方法はさまざまな問題があるため、一般的には使用されません。

レンダリング速度が遅い

HTMLコードの量が増加し、保守が困難になります

タグの名前がHTMLのセマンティクスに準拠していません。もともとテーブルに使用されており、レイアウトにも使用されていないのは不適切でしょうか?

タグ構造が比較的厳格で、後の修正コストが高いなど。ここではあまり詳しく説明しません。つまり、テーブルレイアウトを使用してみてください。

#4 番目の方法: 絶対配置

#この方法は、前述したように、float で要素を作成することもできます。通常のドキュメントフローの場合、ここでのposition:absolute/fixedも同様の効果を持ちます。処理方法はフロートレイアウトで説明されているため、ここに移動するだけで済みます。

ここでは、position:absolute の絶対位置決めについて説明します。位置決めは最初の親に基づいており、position:absolute/relative/fixed などの静的に配置される要素です。それが見つからない場合は、ルートを使用します。要素は位置決めのベースとして使用されます。一般に、親要素のposition:ralativeは、子要素のposition:absoluteと組み合わせて使用されます。

5 番目のタイプ: css3 柔軟なレイアウト

弹性布局因为其兼容性所以还没有得到广泛的认可，不过我觉得以后它肯定会独占鳌头，就跟我看好html的视频播放器一样，早晚都会干败flash，只是时间问题！！！

第六种：transform:translate

CSS3中用于动画的一个样式，但是他可是让两个元素横向排列，这里不多说直接上代码，请用谷歌浏览器运行一下：

<style>
        div{
            width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            transform: translateX(200px) translateY(-200px);
            background:red;
        }
    </style>
<div>
    <div class = "box1">左边</div>
    <div class = "box2">右边</div>
</div>

ログイン後にコピー

效果和前几种方式一样。

以上就是我说分享实现横向布局的六种方式，其实每种方式都有很多大学问，我解释描述了冰山一角，并且没有过多的考虑浏览器的兼容性，不过还是希望对你有所帮助。

以上が要素を水平に配置する 6 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。