-2
A
答えて
1
.bottomdiv {
border: 1px solid red;
height: 50px;
width: 50px;
position:absolute;
left:0;
bottom:0;
}
.col-md-6.col-sm-6.col-xs-6 {
display: table-cell;
height: auto;
border: 1px solid black;
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="parent">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="bottomdiv">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div></div>
1
列をフレックスボックスにして、要素を最後まで整列させることができます。
.row {
background: red;
}
.col-6-md {
background: lightblue;
height: 200px;
display: flex;
}
.bottom {
background: green;
align-self: flex-end;
width: 100px;
height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-6-md">
<div class="bottom">Bottom</div>
</div>
</div>
+0
ああ、問題が見つかりました。高さは柔軟性を保つ必要があります。 –
0
ます。また、その後の位置を確認し、絶対CSS機能 .bottom position:absolute;bottom:0;left:0;
を使ってみて変更することができ、それはあなたに
関連する問題
- 1. Android:TextViewを上下の要素に揃える方法は?
- 2. HTML要素を下から上に揃える方法は?
- 3. ブートストラップの日付ピッカーをブートストラップ列に揃える方法は?
- 4. ブートストラップ:要素を一番上に固定する方法
- 5. スタックの一番上の要素を一番下にスワップする方法
- 6. CSS:リスト要素を左揃えのテキストと中央揃えにする方法
- 7. 正当な方法でフォーム要素を揃える方法は?
- 8. CSS:中心要素の周りに要素を揃える方法は?
- 9. ブートストラップ右揃えの列
- 10. ポップオーバーブートストラップでhtml div要素を水平に揃える方法は?
- 11. NativeScriptのアブソリュートレイアウトの一番下に要素を配置する方法は?
- 12. ウェル内の要素を揃える方法は?
- 13. 親の代わりに他の要素に揃える方法
- 14. ツールバーの要素を左、中、右に揃える方法
- 15. 要素をHTML表のセルの下部に揃えます。
- 16. ブートストラップmultselect要素の一番下にclose/okボタンを追加しますか?
- 17. ブートストラップのサムネイルの行にボタンを揃える方法は?
- 18. クリックした要素の下にdivを表示右揃え
- 19. テーブルの2番目と4番目の列だけを揃える方法は?
- 20. liststemsをブートストラップの右側に揃える方法は?
- 21. CSSの要素を右に揃える
- 22. フッター要素をGridViewに左揃えする方法
- 23. Mathjax要素を左揃えにする方法
- 24. フッター要素を左揃えにする方法
- 25. CSS Flexで一列に中央揃えと右揃えを行う方法
- 26. ブートストラップ3でその要素の一番下まで塗りつぶす方法は?
- 27. ブートストラップ:列内にコンテンツを垂直方向に中央に揃える方法
- 28. 左揃え要素と右揃え要素でカスタムナビゲーションバーを作成する
- 29. 2つのオーバーラップするdivを親の一番下に揃えます。
- 30. ブートストラップでインラインイメージを中央に揃える方法は?
親に合いました相対的には、ボックスではabsokでute and left:0 and bottom:0 –
[CSSを使用してdivの下部にある[Align]ボタンの複製が可能です](https://stackoverflow.com/questions/5817233/align-button-at-the-bottom-of-div -using-css) –
あなたのコードメイトを投稿してください。私たちはあなたを助けることができます。 :) –