私はボタンを垂直方向に一直線に並べようとしていましたが、私はdisplay:inline-blockメソッドを使用して簡単に行うことができますが、ここで間違っていますか？インラインブロック要素の垂直方向の配置が正しくない
.cons_wrap_right {
display: inline-block;
min-height: 175px;
vertical-align: bottom;
width: 25%;
background:#cccccc;
}<div class="cons_wrap_right">
<button type="submit" class="ask_btn">Ask Now</button>
</div>を使用してそれを行うことができますbutton前に、擬似要素を追加します。
EDIT：なぜあなたはそれが全幅にコンテンツをストレッチする必要が
擬似要素を使用しています。 vertical-alignは、親の高さに関しては機能しませんが、コンテンツの高さに関連しています。
最初にボタンの内容の高さがボタンの高さに等しいだけでなく、擬似要素を使用すると、内容は完全な高さに伸びます。
ここにはfiddleがあります。このフィドルでは、コンテンツの下部にボタンが並んでいることを確認します。あなたはボタンの絶対位置を設定してみること
html,body{
height:100%;
}
.cons_wrap_right {
min-height: 175px;
width: 25%;
height:50%;
background:#cccccc;
}
.cons_wrap_right .pseudo{
display: inline-block;
width:1px;
height:100%;
vertical-align:bottom;
background:#cccccc;
}
.cons_wrap_right button{
display: inline-block;
vertical-align:bottom;
}<div class="cons_wrap_right">
<div class="pseudo"></div>
<button type="submit" class="ask_btn">Ask Now</button>
</div>あなたはtableとtable-cell
.cons_wrap_right {
display: table;
min-height: 175px;
width: 25%;
background: #cccccc;
}
.innerBox {
vertical-align: bottom;
display: table-cell;
text-align: center
}<div class="cons_wrap_right">
<div class="innerBox">
<button type="submit" class="ask_btn">Ask Now</button>
</div>
</div>答えがありがたいですが、min heightが 'table'レイアウトの –
で動作していないので、テーブルはデフォルトで流体レイアウトを持っているので、' min-height'の代わりに 'height'を使うべきです。 'height：'は 'display：table'で' min-height'のように振る舞います。 – guari
あなたは、これがpositionまたはflexを使用している行うことができます
.cons_wrap_right {
display: inline-block;
min-height: 175px;
position:relative;
width: 25%;
background:#cccccc;
}
.ask_btn{
position: absolute;
left: 0;
bottom: 0;
}<div class="cons_wrap_right">
<button type="submit" class="ask_btn">Ask Now</button>
</div>答えをありがとうが、位置を使用せずにボタンを移動することは可能です：絶対？ –
明らかに、あなたは他の答えからもそれを見ることができます。それは可能です。私はこのようにしています。 –
二つの方法をclass.Like--。例については、下の抜粋を参照してください。
/* using position relative and absolute */
.cons_wrap_right {
min-height: 175px;
width: 25%;
background: #cccccc;
position: relative;
margin-bottom: 25px;
}
.ask_btn {
position: absolute;
bottom: 0;
}
/* using flexbox */
.cons_wrap_right2 {
min-height: 175px;
width: 25%;
background: #cccccc;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}<div class="cons_wrap_right">
<button type="submit" class="ask_btn">Ask Now</button>
</div>
<div class="cons_wrap_right2">
<button type="submit" class="ask_btn2">Ask Now</button>
</div>コンテナposition: relativeとボタンposition: absoluteプラスbottom: 0与える：あなたは `垂直align`はを参照していないことを理解する必要があります
.cons_wrap_right {
min-height: 175px;
width: 25%;
background: #cccccc;
position: relative;
}
button {
position: absolute;
bottom: 0;
}<div class="cons_wrap_right">
<button type="submit" class="ask_btn">Ask Now</button>
</div>
を含有元素、しかしt o要素の一部であるテキスト行*。 – connexo