Question

我有这个CSS代码：

html,body {
    font-family:Arial;
    font-weight:bold;
}
.container {
    text-align:center;
}
.box {
    width:475px;
    display: inline-block;
    margin:10px 20px 0 auto;
    padding:12px;
    border:1px solid black;
    min-height:60px;
    text-align: center;
    float: left;
    height: 200px;
}
.box h2 {
    font-size:44px;
    margin-top:4px;
    margin-bottom:0;
}
.box p {
    font-size:60px;
    border:1px solid black;
    margin-bottom:0;
}

但是带有两行文本的div使得值/数字显示低于仅包含一行文本的所有其他div。

如何让所有

值/数字显示在.box div内的同一位置？

以下是完整代码的小提琴：http://jsfiddle.net/8kex9/

Answer 1

使用您的代码，您可以执行以下操作：JS Fiddle

给予他们两个绝对位置，将使他们基于父母而不是兄弟姐妹来定位。你只是不能添加太多的文本，否则会相互碰撞。

.box h2 {
    font-size:44px;
    margin-top:4px;
    margin-bottom:0;
    position: absolute;
    width: 465px;
}
.box p {
    position: absolute;
    font-size:60px;
    border:1px solid black;
    margin-top: 120px;
    width: 465px;
}

css边距不在正确的位置显示div

1 个答案: