3

任何人都可以在这里解释 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;
}

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

4

4 回答 4

4

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

你的问题的关键是属性vertical-align。
首先删除border-radius以便更好地查看框。
然后添加vertical-align: middle;：问题已解决（见小提​​琴）

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

首先没有发生vertical-align: middle;什么？更改baseline: 你回到原来的问题。这是默认值，span例如在 s 中显示文本或标签和文本字段的文本时需要的默认值，无论两者的填充和边距如何。但是由于文本被迫占据 2 或 3 行（无论其内容如何，​​框都是 100 像素宽），基线与您所期望的非常不同，它是内容的基线，也就是文本的最后一行。
与 empty 相同div：由于它们缺少要对齐的内容，因此它们的基线是它们的底部（对此不太确定，但这似乎正在发生）。
在一些空白处添加单个字符或不可破坏的空格div：他们的基线现在与空 div 完全不同。查看其他小提琴

同样的现象也发生在一段文字中丢失了一个高大的图像；您可以将其对齐，vertical-align但不同之处在于更容易看到正在发生的事情。在这里，您没有出现一次“正常”文本，因此发现它有点困难。

为什么浮动：左；在这里工作吗？它将获取每个高度相同的框，并将其相对于框对齐，而不是与其内容对齐。但是你必须管理清除，并且在一个盒子上多 1px 可能会破坏以下所有盒子的对齐方式......

于 2013-02-19T19:24:30.943 回答
2

inline-block是具有许多好奇心的属性。在此示例中，您可以清楚地看到，height: 100px从divCSS 规则中删除将导致元素的文本对齐，这对于华丽的圆形虚线多色边框并不那么明显。因此，要解决此问题，您将申请vertical-align: top. （来源）

'inline-block' 的基线是其在正常流中的最后一个行框的基线，除非它没有流入行框，或者它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

（来自另一个线程的一个很好的答案）

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

于 2013-02-19T19:19:56.907 回答
1

对齐一行 

div {vertical-align: middle;}
于 2013-02-19T19:10:27.273 回答
1

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

添加vertical-align:top;也将解决它：http: //jsfiddle.net/Z7z5Q/7/

这是因为 inline-block 对 html 中的空格表现得很奇怪。

于 2013-02-19T19:40:21.380 回答