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

Question

我有一个我想要对齐的数字容器。这是我到目前为止的代码：jsfiddle

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

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

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

有谁知道我在说什么或者我混淆了情况？

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

谢谢您的帮助。

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

Answer 1

这个jsFiddle 例子怎么样？

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;
}​

Answer 2

我不是 100% 确定你想要实现什么，但你可以尝试float在 CSS 中使用该功能，例如这里是http://www.w3schools.com/cssref/pr_class_float.aspfloat:left上 W3schools 页面的链接，或者如果你只是想让他们居中你总是可以尝试float <center>

Answer 3

更新更漂亮的代码

另外，伙计，您看起来正在尝试做的是显示表格数据

如果是这样的话，使用一个实际的表并没有错——事实上，不这样做是错误的。

html

<section class="container">
  <header>
    <h1 class="title">Title</h1>
  </header>
  <ul class="point-container">
    <li class="day"><h1>1<span>st</span></h1></li>
    <div class="points">
      <li class="max">Max</li>
      <li class="close">Close</li>
    </div>
    <div class="results">
      <li class="totals">Total</li>
      <li class="thirty-points">30 points</li>
      <li class="fifty-points">50</li>
    </div>
  </div>
</section>

css

//  ==================
//  base
//
//
html{ font-size: 62.5%; }
body{
font-size: 1.6rem;
  font: normal normal 100 1.6rem "Helvetica Neue", sans serif;
  background-color: black;
}
.container{
  width: 90%;
  color: white;
  margin: auto;
}

//  ==================
//  layout
//
//

body,
.container, 
.points, 
.results, 
.point-container{
  display: flex; 
}
.points,
.container{
  flex-flow: column; 
}
.results{ flex-flow: row;}
.day,
.results li{ 
  flex: 1; 
}
.points, 
.results{ 
  flex:3; 
}

.results li{
  text-align: center;
}



//  ==================
//  colors
//
//
.title{ background-color: #008001; }
.day{ background-color: #00ff00; }
.max{ background-color: blue; }
.close{ background-color: purple; }  
.totals{ background-color: orange; }
.thirty-points{ background-color: red; }
.fifty-points{ background-color: gold; }

Answer 4

使用这个：小提琴

.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: left;
}

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

.fifty-points
{
    background-color: gold;
        width: 10%;
        float: left;
        display:inline;
        float: left;
    }

.clearfix {
    clear: both;
    }

<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 class="clearfix"></div>
</div>