如何使用CSS对齐多个div

Question

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

首先，当我从我的机器运行此代码时，“day-label”的大小是它在jsfiddle上显示的两倍。接下来的两个（“最大点”和“关闭点”）堆叠在一起，并且是正确的文本到“day-label”，这是我想要的。

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

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

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

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

感谢您的帮助。

这是我想要它的样子 -

Answer 1

使用此：fiddle

.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>

Answer 2

这是如何 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;
}​

Answer 3

我不是100％肯定你想要实现的目标，但你可以尝试在CSS中使用float功能，例如float:left这里是{{1}上W3schools页面的链接} http://www.w3schools.com/cssref/pr_class_float.asp或者如果您只是希望它们居中，您可以随时尝试float

Answer 4

Update with prettier code

另外，你看起来像你要做的就是显示tabular data

如果是这种情况，使用实际表格没有任何问题 - 事实上，不这样做是错误的。

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