css - 如何使用 CSS 对齐多个 div

Question

我有一些容器需要对齐。这是我到目前为止的代码:jsfiddle

首先，当我从我的机器上运行这段代码时，“day-label”是它在 jsfiddle 上显示的两倍大小。接下来的两个(“max-points”和“close-points”)相互堆叠并且是“day-label”的正确文本，这正是我想要的。

现在接下来的三个容器我似乎无法将它们排成一行，“总计”容器我想要像“日标签”一样但在最大点和收盘点的右侧。然后接下来的两个“三十分”和“五十分”我想要在总数旁边。

它们应该都在同一条线上，但它们的形状并不完全相同。

有谁知道我在说什么还是我混淆了情况？

我想我可以使用“top:X”和“left:X”，但我想知道是否有更简单的方法让它们相互内联？就像前三个容器一样。

感谢您的帮助。

这是我希望它看起来如何的模型 -

Answer 1

这个怎么样jsFiddle example ?

HTML

<div class="day-point-container">                
    <div class="result-headers">Title</div>
    <div class="day-label"><h1>1<small>st</small></h1></div>
    <div class="max-points">Max</div>
    <div class="close-points">Close</div>
    <div class="points-totals">Total</div>
    <div class="thirty-points">30 points</div>
    <div class="fifty-points">50</div>
</div>​

CSS

.day-point-container
{
    width: 100%;
    background-color: pink;
}

.result-headers
{
    background-color: green;
}

.day-label
{
    background-color: lime;
    width: 10%;
    height: 10%;
    text-align: center;
    float: left;
}

.max-points
{
    background-color: blue;
    width: 50%;
    height: 5%;
}

.close-points
{
    background-color: purple;
    width: 50%;
    height: 5%;
}

.points-totals
{
    background-color: orange;
    width: 20%;
    height:10%;
    float:right;
}

.thirty-points
{
    background-color: red;
    width: 10%;
    float:right;
}

.fifty-points
{
    background-color: gold;
    width: 10%;
    clear:right;
    float:right;
}​