在 bootstrap 上对齐 div 工具提示
Align div on bootstrap Tool Tip
我为 HTML 视图页面生成了代码,以针对 table 中的每一列显示 BS 工具提示。工具提示的内容,也是类似table的结构。我使用 divs 制作它,但在 div 上有很长的内容未正确对齐为 table
你能帮我更正这个变化吗?
严重级别是第二行,严重级别对应的值是长的。我需要将严重级别与相应值的开头对齐
HTML(通过 rails 模板生成)
<div data-toggle="tooltip" data-placement="right" data-html="true" title="" data-animation="true" data-original-title="
<div style = 'width:200px,'>
<div class ='tool-tip-cells'>Repair Method </div>
<div class ='tool-tip-cells'> Repaint </div><div class ='tool-tip-cells'>Severity Level</div>
<div class ='tool-tip-cells'>Damage 2.5cm to 7.5cm in length and/or diameter</div>
<div class ='tool-tip-cells'>Estimate No.</div>
<div class ='tool-tip-cells'>9176863</div>
<div>">Rear Bumper RHS (Scuffed)</div>
CSS
.tool-tip-cells{
text-align: left;
width: 100px;
display: inline-block;
}
你可以试试这个代码:
vertical-align: text-top;
我为 HTML 视图页面生成了代码,以针对 table 中的每一列显示 BS 工具提示。工具提示的内容,也是类似table的结构。我使用 divs 制作它,但在 div 上有很长的内容未正确对齐为 table
你能帮我更正这个变化吗?
严重级别是第二行,严重级别对应的值是长的。我需要将严重级别与相应值的开头对齐
HTML(通过 rails 模板生成)
<div data-toggle="tooltip" data-placement="right" data-html="true" title="" data-animation="true" data-original-title="
<div style = 'width:200px,'>
<div class ='tool-tip-cells'>Repair Method </div>
<div class ='tool-tip-cells'> Repaint </div><div class ='tool-tip-cells'>Severity Level</div>
<div class ='tool-tip-cells'>Damage 2.5cm to 7.5cm in length and/or diameter</div>
<div class ='tool-tip-cells'>Estimate No.</div>
<div class ='tool-tip-cells'>9176863</div>
<div>">Rear Bumper RHS (Scuffed)</div>
CSS
.tool-tip-cells{
text-align: left;
width: 100px;
display: inline-block;
}
你可以试试这个代码:
vertical-align: text-top;