我想垂直地对一个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

相关问题