CSSのDIVボックスをリフローして右下に貼り付けるには？

Question

私は四角形で書かれたDIVを持っていて、その内部に四角形（DIV）があります。私はメインのDIVの中の四角形を右下に積み重ねたい。私はfloat: rightを使って右端に置くことができますが、上端ではなく下端にどのようにスタックさせるのですか？

Answer 1

はあなたが良いCSSの解決策を見つけられないなら、jQueryのは、これを簡単に扱うことができます：ここで

Fiddle

$('.inner').each(function(i) { 
    $this = $(this); 
    var bottomPos = ($this.outerHeight())*i; 
    $this.css('bottom', bottomPos); 
}); 

HTMLとCSS

<style type="text/css"> 
    #outer { 
     width: 400px; 
     height: 600px; 
     background-color: #eee; 
     position: relative; 
    } 
    .inner { 
     width: 100px; 
     height: 100px; 
     background-color: #ccc; 
     border: 1px solid #aaa; 
     position: absolute; 
     right: 0; 
    } 
</style> 

<div id="outer"> 
    <div class="inner">One</div> 
    <div class="inner">Two</div> 
    <div class="inner">Three</div> 
    <div class="inner">Four</div> 
</div> 

Answer 2

子供がコンテナの底にくっつくようにするには、position:relativeとbottom:0pxと設定します。しかし、これはそれらを積み重ねません、別の子供の上にある子供のために別の値に底を設定する必要があります。サイズは、このような可変である場合は、動的に収まるようにjavascriptやjqueryのを使用することができます。

$('#second_element').css('bottom', $('#bottom_element').height() + 5); 

注：5はちょうどパディング

Answer 3

のためにあなたがvertical-align:bottom

でdisplay:table-cellを使用することができますここで良いのチュートリアルがありますされます

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

Answer 4

： "テーブル・セル" のレイアウトを使用して上「スタックを最下部に」という意味に応じて、下部に配置された内部コンテナdivを使用してこれを実現できます。これはどうなるのか

<div id="main_div" style="position: relative; height: 500px; width: 500px;"> 
    <div id="container_div" style="position: absolute; bottom: 0; right: 0;"> 
     <div class="right_floated_square">Square 1 Content</div> 
     <div class="right_floated_square">Square 2 Content</div> 
     <div class="right_floated_square">Square 3 Content</div> 
    </div> 
</div> 

下部にある右から左にこれらの正方形を流している。そして、これらの子正方形はそうは次のように、彼らがメインのdivの底に固執する原因と、右のこのコンテナのdivの内側にフロートすることができメインディビジョンのしかし、これらの子四角はコンテナdiv内の上から下に流れます。あなたがそれらを逆に（下から上へ）縦方向に流したければ、複雑なレイアウトのJavaScriptなしでそれが可能かどうかは分かりません。

明らかに、「right_floated_square」の正確なスタイリングは簡潔にするために削除されています。

Answer 5

は、純粋なCSSのバージョンである：http://jsfiddle.net/zkhWA/1/

基本的に、小さな正方形を別の絶対配置された要素に置きます。この要素は、大きな正方形の右下隅に配置されています使用：

position: absolute; 
right: 0px; 
bottom: 0px; 

はその後、すべての小さな正方形が右フロートします：大きな広場に相対：

float: right; 

は位置を適用することを忘れないでください。