我想垂直地對一個div的右下角的圖標：另一個垂直取向的問題

<div class="row" style="border: 1px solid #000; width:50%"> 
    <div class="col-xs-11">Foo<br/><span style="font-style:italic">Bar</span></div> 
    <div class="col-xs-1" style="vertical-align: bottom; display:inline-block"> 
     <i class="glyphicon glyphicon-chevron-down"></i> 
    </div> 
</div>

http://jsfiddle.net/EAUcW/640/

我讀過，建議使用顯示器的帖子：表單元格或內聯塊，以及垂直對齊：底部。這似乎並不適用於這種特殊情況。這是爲什麼？

來源

2014-12-04 user1491636

你的小提琴代碼比自己張貼在你的問題的代碼不同。 – 2014-12-04 21:29:53

無論如何，如果您希望** Hello **在右下方對齊，請添加'text-align：right'。 ------------> [小提琴]（http://jsfiddle.net/chipChocolate/EAUcW/639/） – 2014-12-04 21:30:58

對不起，更新小提琴。 – user1491636 2014-12-04 21:34:05

像這樣：

Fiddle

CSS

.bottom-right-icon { 
    position: absolute; 
    bottom: 0; 
    right: 5px; 
}

HTML

<div class="row" style="border: 1px solid #000; width:50%; position: relative;"> 
    <div class="col-xs-11">Foo<br/><span style="font-style:italic">Bar</span></div> 
    <div class="bottom-right-icon"> 
     <i class="glyphicon glyphicon-chevron-down"></i> 
    </div> 
</div>

注意添加position: relative,div.row，以及從圖標中去除引導col-xs-1類。

然後，其餘的只是通過absolute定位將圖標推到它所屬的位置。

來源

2014-12-04 21:53:31

我相信在SO的某個地方有答案，但找不到原文。

下面應該解決您的問題：

<div class="row" style="border: 1px solid #000; width:50%"> 
    <div class="col-xs-11" style="vertical-align: bottom; display:inline-block;float:none;">Foo 
     <br/><span style="font-style:italic">Bar</span> 
    </div> 
    <div class="col-xs-1" style="vertical-align: middle; display:inline-block;float:none;"> <i class="glyphicon glyphicon-chevron-down"></i> 
    </div> 
</div>

Updated fiddle

來源

2014-12-06 00:08:36 Morpheus

另一個垂直取向的問題

回答

Fiddle

相關問題