[辛口情報]: 要素を水平に配置するにはどうすればよいですか? _html/css_WEB-ITnose

ブロックレベルの要素はデフォルトで縦に配置されますが、インライン要素は基本的にレイアウトで使用されます（divやその他の一般的なブロックレベルのタグ）。横に並べるとどうなるでしょうか？要素を水平に配置する方法は 100 通りあります (正確には 100 ～ 94)。いくつ知っていますか?

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

まず、ブロック要素 (block 要素)、インライン要素 (inline 要素)、および inline-block 要素 (inline-block 要素) について理解する必要があります

Block-レベル要素 : ブロックレベル要素には、width height、padding、border、margin が含まれます。一般的なブロックレベル要素には、div、p、form、ul などが含まれます。さらにブロックレベルに移動できます。要素を確認してください https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

インライン要素: 高さと幅はコンテンツによって決定され、固定値を設定することはできません。縦方向のマージンとパディングがあり、配置は横方向です。a、span、label、button、img、inline 要素など、インライン要素はすべて HTML 要素の中で最も多くを占めます。 MDN を確認してください https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

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

置換要素: 一般的な理解は、幅と高さの属性を持つ要素です。置換要素は、display:block 要素に似ており、高さ、幅、内側と外側のマージンを設定できます。これには、主に img、input、textarea、select、object、audio、および Canvas が含まれます。交換要素。より正式な定義 https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

Non-replaceable elements: 置換された要素を除き、残りは置換不可能な要素です (O(∩) _∩ )O)

たくさん話し合った結果、display: inline-block は要素を水平に配置できることがわかりましたが、このレイアウトにはいくつかの小さな問題がある可能性があります。たとえば、次のとおりです。 2 つの div の間にギャップがあるのはなぜですか?

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

1. div2のmargin-leftを設定:-font-size/2

2. 2つのdivの親タグのfont-sizeを設定: 0

3. 負のword-spacingを設定

などさまざまな方法があります。具体的な詳細については、Zhang Xinxu のブログを参照してください。 http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

2 番目のタイプ: float: left/right

float 属性を使用すると、要素を通常のドキュメント フローから切り離して、コンテナーの左側または右側に沿って水平に配置できます。

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

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

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

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

解決策は当然、主に 2 つの方法で float をクリアすることです:

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

2.BFC、BFCには「

BFCの高さを計算する際、浮動要素も計算に参加する

」というルールがあるためです。

clear を使って float をクリアするいくつかの方法について話しましょう:

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

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

BFC を通じて高さの崩壊を解決します:

　　　　为父元素创建BFC（摘自MDN），只要满足以下任何一种都会为元素创立BFC。

A block formatting context is created by one of the following:

the root element or something that contains it

floats (elements where float is not none)

absolutely positioned elements (elements where position is absolute or fixed)

inline-blocks (elements with display: inline-block)

table cells (elements with display: table-cell, which is the default for HTML table cells)

table captions (elements with display: table-caption, which is the default for HTML table captions)

elements where overflow has a value other than visible

flex boxes (elements with display: flex or inline-flex)

我英语不好，上面的英文也能看懂，所以它就不需要翻译了吧，建议动手试一下。

第三种：table布局

　　这种布局方式其实不常用，因为它存在种种问题。

　　　　·渲染速度较慢

　　　　·增加html代码量，不易维护

　　　　·标签的名字不符合html语义化，table本来就是做表格用的，拿来布局甚是不妥

　　　　·标签结构较死，后期修改成本较高

等等，此处不作过多阐述。总之，尽量用table布局

第四种：绝对定位

　　这种方式日常开发中用的也较多，前面提到float可以让元素脱离常规文档流，这里position:absolute/fixed也具有同样的效果，处理办法在float布局中已经提到了，这里搬来即可。

　　这里要说一下position:absolute绝对定位，以它的第一个父级并且是position:absolute/relative/fixed定位的元素为基点进行定位，如果找不到则以根元素为基准进行定位。一般都是采用父元素position:ralative，子元素position:absolute结合使用。

第五种：css3的弹性布局

　　html5的新特性，由于其功能太强大，兼容性太差，我现在还没法驾驭它，所以没敢献丑，不过w3cplus有篇文章写的很好，感兴趣可以读一下http://www.w3cplus.com/css3/using-flexbox-today.html。

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

第六种：transform:translate

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

<style>        div{            width:200px;    height:200px;        }        .box1{            background:green;        }        .box2{            transform: translateX(200px) translateY(-200px);            background:red;        }    </style><br />

<div>    <div class = "box1">左边</div>    <div class = "box2">右边</div></div>

效果和前几种方式一样。

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

 

如有错误，请指正，

如果你有其它方式，请留言补充

感谢