Geekly Articles each Day

ブロックの反対側に要素を配置する

こんにちは親愛なる読者。 今日は、2つの要素が配置されているブロックの異なる側面に2つの要素を広げるあまり知られていない方法について説明します。 このような例

しばらくの間、私はあなたの多くと同じように、2つの方法を使用しました：
  1. 最初の方法は、floatプロパティに基づいています。 左側のブロックは、float：left、右側のfloat：rightに設定されます
  2. 2番目の方法は、右ブロックの絶対配置にあり、パラメーターはright：0またはleft：100％、margin-left：-（ブロック幅）

両方の方法の主な欠点は、ブロックを下の境界に沿って、または正中線に沿って相互に整列させる必要がある場合、選択方法によってブロックを垂直に移動し、top：anyValueまたはmargin-top：anyValueのいずれかに設定する必要があることです。 そして、最初の方法とすべてにもう1つあります。それは欠点ではなく、不快な些細なことです。 これは、clearFix、オーバーフロー、または追加のdivでストリームをクリアする必要があります。
したがって、メソッド番号3です。開始するには、コード：

HTML自体


Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
  1. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
  2. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
  3. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >

CSS自体


Copy Source | Copy HTML
  1. .wrap {
  2. 幅 ： 500px ;
  3. 背景 ： ＃555 ;
  4. 高さ ： 500px ;
  5. }
  6. .left 、 .right {
  7. 表示 ： インライン ブロック 。
  8. //表示：インライン;
  9. //ズーム：1;
  10. 幅 ： 100％ ;
  11. マージン右 ： -100％ ;
  12. 垂直方向の整列 ： 下 ;
  13. }
  14. .right {
  15. text-align ： right ;
  16. }
  17. .left a 、 .right a { display ： inline - block ; 位置 ： 相対 ; }
  18. .left a { width ： 200px ; 高さ ： 100px ; 背景 ： 緑 ; }
  19. .right a { width ： 100px ; 高さ ： 200px ; 背景 ： ピンク 。 }

説明


この方法の本質は、margin-right：-100％を使用してブロックを互いの上にオーバーレイし、text-align：rightを使用して右ブロックのコンテンツを右に揃えることです。
同じ行に両方のブロック（右と左）を書き込むことをお勧めします。そうしないと、改行文字のために、右のブロックが親ブロックの境界をわずかに超えてcreepい出します。
リンクはposition：relativeに設定する必要があります。そうしないと、ブロックが重複しているためクリックできない場合があります。

この方法の利点


主な利点は、ブロックに対して垂直方向の整列が機能するようになったことです。 また、上部の境界線と下部と中央の両方に簡単に配置できます。

メソッドの短所


そして主なマイナス点は、この方法を使用すると、ブロックの内容が互いに重なり始めるほど増加しないことをしっかりと確信しなければならないことです（ところで、フロートを使用する方法にはこの欠点がありません。ブロックの内容、それらは互いの下に立つでしょう）。

完成した例へのリンク

PS


インターネットでそのような方法を見たことはないので、リクエストです。以前に公開された同様の記事を誰かが見つけたら、教えてください。

更新しました。


コメントでは、text-align：justifyを使用する方法に注意が向けられました。 この方法も優れていますが、2つの欠点があります。 第一に、テキストブロックの最終行をエミュレートする追加要素の導入が必要です。第二に、ブロック要素のIE6-IE7では機能しません。

Source: https://habr.com/ru/post/J102651/

More articles:


All Articles