Question

您好我正在开发一个带有bootstrap 3的网站标题，其中包含4个div。这4个div中的每一个都有2个嵌套的div。在第一个嵌套div中存在2个内联块跨度，具有不同的字体和字体大小。

想象一下4个初始div中的一个，我想要实现的是：

___________________________________
|                                 |
|                                 |
|        180,00€   Total          |
|---------------------------------|
|     for the last 30 days        |
|                                 |
|_________________________________|

正如你在里面看到的4个div中的每一个都会存在类似上面的东西。 180,00€和总共2个跨度内联块。我希望上部文本在底部对齐，下部文本在顶部对齐。

您可以在此处看到有效的演示：JSFIDDLE

HTML：

<div class="row stats-row">
    <div class="col-sm-3 col-xs-6 stat"></div>
    <div class="col-sm-3 col-xs-6 stat"></div>
    <div class="col-sm-3 col-xs-6 stat"></div>
    <div class="col-sm-3 col-xs-6 stat">
        <div class="data">
            <span class="data-num">81,00€</span>
            <span class="num-desc">total</span>         
        </div>
        <div class="data-desc">last 30 days</div>       
    </div>
</div>

CSS：

.row.stats-row {
    -webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    background-color: #f9f9f9;
    padding: 0px;
    margin: 0px !important;
}

.row.stats-row .stat {
    border-right: 1px solid #dae3e9;
    border-bottom: 1px solid #dae3e9;
    height: 80px;
    -webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* EDIT BELLOW */

.stats-row .stat .data{
    text-align: center;
    height: 50%;
}
.stats-row .stat .data-desc{
    text-align:center;
    height:50%;
    color:#777; 
    font-style: italic;
    font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
    display: inline-block;
    height:100%;
    line-height:100%;
    vertical-align: baseline;
}
.stats-row .stat .data .data-num{
    margin-right:20px;
    color: #32a0ee;
    font-size: 25px;
}
.stats-row .stat .data .num-desc{
    color: #29323a;
    font-weight: bold;
    font-size: 16px;
}
#monthGraphs .portlet-header h3{
    text-align:center;
}
.graph{
    width:100%;
}

Answer 1

在.data-desc部分添加了跨度并管理了此

JSFiddle Demo

调整后的HTML部分

<div class="data-desc"><span>over the last</span><span>30 days</span></div>

<强> CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

.row.stats-row {
    -webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    background-color: #f9f9f9;
    padding: 0px;
    margin: 0px !important;
}

.row.stats-row .stat {
    border-right: 1px solid #dae3e9;
    border-bottom: 1px solid #dae3e9;
    height: 80px;
    -webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* EDIT BELLOW */

.stats-row .stat .data{
    height: 50%;
}
.stats-row .stat .data-desc span{
    height:50%;
    color:#777; 
    font-style: italic;
    font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
   //display: inline-block;
    height:100%;
    line-height:100%;
    vertical-align: bottom;
}
.stats-row .stat .data .data-num{
    color: #32a0ee;
    font-size: 25px;
}
.stats-row .stat .data .num-desc{
    color: #29323a;
    font-weight: bold;
    font-size: 16px;
}
/* EDIT BELLOW */

.stats-row .stat .data{
    overflow: hidden; /* quick clearfix */
}

.data span,
.data-desc span{
  width:50%;
  float:left;
  text-align:center;
}

.data span:last-child,
.data-desc span:last-child{
  text-align:left;
    padding-left:16px;
}

向跨度添加类将避免使用last-child，并且行高可能会使用调整。 坦率地说，使用表格可能更容易。：）

Answer 2

如果我理解正确的问题。尝试在你的CSS底部添加它

.data-num{
    padding-top:15px;
}

位置跨越div底部的内联块

2 个答案: