Question

我正在尝试创建一个显示一些简单指标的仪表板，但是让梦魇对齐div内容。

我的代码：

<style>
    body { background-color: #000000}
    #metrics { width: 95%; margin: 20px auto; }
    #metrics > div { background-color: #1FAAAA; height: 200px; width: 200px; display: inline-block; margin:20px }
    #metrics > div > div { font-weight: bold; color:#FFFFFF; width: 100%; text-align: center; }
    .head { font-size: 40px; width: auto; line-height: 35px; }
    .top_margin { margin-top: 10px }
    .count { font-size: 60px;  }
    .diff { font-size: 40px;  }
</style>

<div id="metrics">
    <div>
        <div class="head">Long Status</div>
        <div class="count">00</div>
        <div class="diff">+/- 00</div>
    </div>
    <div>
        <div class="head"><br>Status</div>
        <div class="count ">00</div>
        <div class="diff">+/- 00</div>
    </div>
</div>

我正在尝试对齐状态，以便它们显示内联。我猜可能有一种方法可以使用CSS。

提前致谢。

Answer 1

我为盒子添加了一个类（class =“box”）并将它们向左浮动。不知道这是否会破坏内联块的目的，但在JSfiddle中它现在正确对齐。我还删除了一个悬空br（在状态之前），转而支持在头部填充。

DEMO

<style> 
body {
    background-color: #000000
}
#metrics {
    width: 95%;
    margin: 20px auto;
}
.box {
    background-color: #1FAAAA;
    height: 200px;
    width: 200px;
    margin: 20px;
    font-weight: bold;
    color:#FFFFFF;
    text-align: center;
    display: inline-block;
    float: left;
}
.head {
    padding: 15px;
    font-size: 30px;
    line-height: 35px;
}
.top_margin {
    margin-top: 10px
}
.count {
    font-size: 60px;
}
.diff {
    font-size: 40px;
}
</style>

<div id="metrics">
    <div class="box">
        <div class="head">Long Status</div>
        <div class="count">00</div>
        <div class="diff">+/- 00</div>
    </div>
    <div class="box">
        <div class="head">Status</div>
        <div class="count ">00</div>
        <div class="diff">+/- 00</div>
    </div>
</div>

CSS Metric仪表板

1 个答案: