私は四角形で書かれたDIVを持っていて、その内部に四角形(DIV)があります。私はメインのDIVの中の四角形を右下に積み重ねたい。私はfloat: right
を使って右端に置くことができますが、上端ではなく下端にどのようにスタックさせるのですか?CSSのDIVボックスをリフローして右下に貼り付けるには?
答えて
はあなたが良い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>
JavaScriptを少し改良して '$( '。inner')にすることができますcss( 'bottom'、function(i){return $(this).outerHeight()* i;});'。 – thirtydot
子供がコンテナの底にくっつくようにするには、position:relative
とbottom:0px
と設定します。しかし、これはそれらを積み重ねません、別の子供の上にある子供のために別の値に底を設定する必要があります。サイズは、このような可変である場合は、動的に収まるようにjavascriptやjqueryのを使用することができます。
$('#second_element').css('bottom', $('#bottom_element').height() + 5);
注:5
はちょうどパディング
のためにあなたがvertical-align:bottom
でdisplay:table-cell
を使用することができますここで良いのチュートリアルがありますされます
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
: "テーブル・セル" のレイアウトを使用して上「スタックを最下部に」という意味に応じて、下部に配置された内部コンテナ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」の正確なスタイリングは簡潔にするために削除されています。
は、純粋なCSSのバージョンである:http://jsfiddle.net/zkhWA/1/
基本的に、小さな正方形を別の絶対配置された要素に置きます。この要素は、大きな正方形の右下隅に配置されています使用:
position: absolute;
right: 0px;
bottom: 0px;
はその後、すべての小さな正方形が右フロートします:大きな広場に相対:
float: right;
は位置を適用することを忘れないでください。
- 1. divの下にimgを貼り付けますか?
- 2. 上部に貼り付けられたスパンを含むCSS div?
- 3. エラー/下に貼り付けたスクリプト
- 4. iframeオーバーレイの右端にイメージボタンを貼り付けます
- 5. `$`をリストに貼り付けるには
- 6. コアプロットをCore-Plotの下に貼り付けるGraphView
- 7. Jsp Excelファイルからデータをコピーして入力ボックスに貼り付けます
- 8. TinyMCEはエディタに貼り付けるときにDIVを削除します。
- 9. Javascript - 貼り付けイベントの前に貼り付けデータを取得する
- 10. SMSアプリケーションに貼り付けるためにビューのコンテンツをコピーして貼り付けよう
- 11. セルをコピーして乗算し、各セルを下に貼り付けます。
- 12. キーボードイベントをhtml5キャンバスに貼り付けて
- 13. jQueryファンシーボックススピニングローダーに貼り付け
- 14. md-actionボタンをmd-cardの一番下に貼り付けるには?
- 15. 貼り付け底面に達してスクロールバックした後に貼り付けブートストラップがちらつく
- 16. JavaScriptを使ってペーストビンにテキストを貼り付けるには
- 17. ウェブページにテキストを貼り付ける
- 18. Silverlightに画像を貼り付ける
- 19. Vistaのデスクトップに貼り付ける
- 20. divの1枚おきに画像を貼り付けてください。
- 21. 指定された値を持つすべての行を列に貼り付けて貼り付けます
- 22. 携帯電話を再起動してからクリップボードに貼り付けたテキストを貼り付けます
- 23. divを画面上部に貼り付け、フッターを打つ前に止める
- 24. 複数回コピーして貼り付け
- 25. は、私はからCSSをコピーして貼り付け部品CSSが適切に
- 26. スクロールバーが必要ない限り、ブラウザの下部に貼り付けるHTMLフッター
- 27. jsを使ってテキスト行を貼り付けるには?
- 28. SASデータセットに行をコピーして貼り付ける
- 29. CSSには、divの右下にdivがあります。 DivsはHTMLの逆です
- 30. 右のdivを下の代わりに上にする
上部の四角にマージントップを試してください。それはすべてを動かすべきだ。正確なマージンを設定することなく、自動的に実行される方法はわかりません。 –
margin-topには特定の#値が必要です。私はそれをしたくない、私はちょうど "これらを底に整列させて、それらを上に積み重ねる"という言い方が欲しいと思う。 – CaptSaltyJack
私がそれを行うことを知っている唯一の方法は、テーブルを使用して、次にtd使用属性valign = "bottom" –