如何使用CSS对齐多个div

时间:2012-07-19 15:31:18

标签: css layout html

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

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

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

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

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

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

感谢您的帮助。

这是我想要它的样子 -

enter image description here

4 个答案:

答案 0 :(得分:0)

使用此: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>

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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