如何使用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; }