Question

有人可以在这里解释div的行为http://jsfiddle.net/Z7z5Q/吗？我想知道，为什么他们没有在一条线上对齐？为什么在div中添加文本会移动其他div？

这是html和css：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div class="friend">Some text in more than two line, actually in 3</div>
        <div class="family">Some text in two line</div>
        <div class="friend" id="best_friend"></div>
        <div class="enemy" id="archnemesis"></div>
        <div class="friend">Some text</div>
        <div class="family"></div>
        <div class="friend"></div>
        <div class="family"></div>

    </body>
</html>

的CSS：

div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius: 100%;
    border: 2px solid black;
}

.friend {
   border: 2px dashed #008000;  
}

.family {
    border: 2px dashed #0000FF;
}

.enemy {
    border: 2px dashed #FF0000;
}

#best_friend {
    border:4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}

感谢。将欣赏文档或文章的链接。

Answer 1

元素是对齐的......但不是按照你想要的方式，显然;）

问题的关键是财产 vertical-align 首先删除border-radius以便更好地查看框然后添加vertical-align: middle;：问题已解决（see fiddle）

内容与否，每个框现在相对于其固定高度对齐（您将其固定为100px）。

首先没有vertical-align: middle;的情况发生了什么？更改baseline的值：您已回到原始问题。这是默认值，例如在span中显示文本时所需的值，或标签和文本字段的文本，无论两者的填充和边距。但是，由于文本被迫占据2或3行（无论内容是100px宽，所以基线与您期望的非常不同），它是内容的基线，也就是最后一行文本。
与空div相同：由于它们缺少与之对齐的内容，因此它们的基线是它们的底线（对此不太确定，但这似乎发生了什么）。
在一些空的div中添加单个字符或不可破坏的空格：它们的基线现在与空div完全不同。见other fiddle

同一现象发生在一段文字中丢失的高图像;你可以将它与vertical-align对齐，但区别在于它更容易看到发生了什么。在这里你没有一个“普通”文本出现，因此发现它有点困难。

为什么漂浮：左;在这里工作？它将采用每个盒子，所有相同的高度，并相对于盒子对齐，而不是与其内容对齐。但是你要管理清算并在一个盒子上多打1px就可以打破以下所有盒子的对齐...

Answer 2

inline-block是一个有许多好奇心的属性。在此示例中，您可以清楚地看到从height: 100px CSS规则中删除div将导致元素的文本对齐，而华丽的圆形虚线多色边框则不是那么明显。因此，要解决此问题，您需要应用vertical-align: top。（source）

“内联块”的基线是正常流程中其最后一个线框的基线，除非它没有流入线框或者其“溢出”属性的计算值不是“可见” '，在这种情况下，基线是底部边缘边缘。

(from a great answer from another thread)

相比之下，默认情况下浮动对齐在顶部。

Answer 3

在一行上对齐

div {vertical-align: middle;}

Answer 4

添加float:left;将解决此问题，请参阅此处：http://jsfiddle.net/Z7z5Q/5/

同时添加vertical-align:top;也可以解决问题：http://jsfiddle.net/Z7z5Q/7/

这是因为内联块在html中使用空格表现得很奇怪。

对齐内联块的div

4 个答案: