如何使用CSS对齐多个div

Question

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

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

现在接下来的三个容器我似乎无法让他们排队，“分数总计”容器我想成为“日标”，但在最大和接近点的右侧。那么接下来的两个“三十分”和“五十分”我想要在总数旁边。

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

有人知道我在说什么，或者我在混淆这种情况吗？

我想我可以使用“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％肯定，你想要什么来实现，但你可以尝试使用float功能CSS，例如float:left这里是一个链接到W3schools页面floathttp://www.w3schools.com/cssref/pr_class_float.asp或者如果你只是想让他们居中，你总是可以尝试<center>

Answer 4

Update with prettier code

须─老兄，你的样子，你正在试图做的是显示tabular data

如果是这样的话，没有什么错，其实使用的实际table--，不这样做会是错误的。

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