我有一个我希望对齐的数字容器。这是我到目前为止的代码:jsfiddle
首先,当我从我的机器运行此代码时,“day-label”的大小是它在jsfiddle上显示的两倍。接下来的两个(“最大点”和“关闭点”)堆叠在一起,并且是正确的文本到“day-label”,这是我想要的。
现在接下来的三个容器我似乎无法将它们排成一行,“点数总计”容器我想要像“日标签”,但是在最大和最近点的右边。接下来的两个“三十分”和“五十分”我想要在总数旁边。
它们应该都在同一条线上,但它们的形状并不相同。
有谁知道我在说什么,还是我混淆了这种情况?
我想我可以使用“top:X”和“left:X”,但我想知道是否有更简单的方法让它们互相内联?就像前三个容器一样。
感谢您的帮助。
这是我想要它的样子 -
答案 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)
另外,你看起来像你要做的就是显示tabular data
如果是这种情况,使用实际表格没有任何问题 - 事实上,不这样做是错误的。
<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>
// ==================
// 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; }