如何使用CSS对齐多个div
如何使用CSS对齐多个div
提问于 2012-07-19 23:31:18
我有很多想要对齐的容器。这是我到目前为止所拥有的代码：jsfiddle
首先，当我在我的机器上运行这段代码时，"day-label“的大小是它在jsfiddle上显示的两倍。接下来的两个(“max-point”和“close-point”)堆叠在一起，是"day-label“的正确文本，这就是我想要的。
接下来的三个容器，我似乎不能将它们排成一列，“points total”容器，我想要像"day-label“一样，但在max和close点的右边。然后接下来的两个“30分”和“50分”我要在总数旁边。
它们应该都在同一条线上，但它们的形状并不都一样。
有人知道我在说什么吗?还是我把事情搞乱了？
我想我可以使用"top:X“和"left:X”，但我想知道是否有一种更简单的方法来使它们相互内联？就像前三个容器。
谢谢你的帮助。
这是我想要的样子的模型-
回答 4
Stack Overflow用户
发布于 2012-07-19 23:51:11
使用这个：
.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>Stack Overflow用户
发布于 2012-07-19 23:52:26
这个怎么样？
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;
}Stack Overflow用户
发布于 2012-07-19 23:55:09
我不是百分之百确定你想要实现什么，但你可以尝试在CSS中使用float函数，例如float:left这里有一个指向float http://www.w3schools.com/cssref/pr_class_float.asp上的W3schools页面的链接，或者如果你只是想让它们居中，你可以尝试<center>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11564217
复制相关文章
相似问题
腾讯云开发者
