Question

我对代码感到困惑的几件事情：

如果没有注释掉的“vertical-align”行，div框就不会排成一行。
<p>内的<div>标记会在顶部添加额外的空格。

图片根本没有显示。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
<!--vertical-align: middle; -->
    border: 2px dashed #008000;
}
</style>
<title>Frends n shiz</title>
</head>
<body>
    <div><p>billy</p><img href="http://i.imgur.com/mango.jpg" /></div>
    <div><p>bob</p></div>
    <div>joe</div>
    <div>schmoe</div>
    <div><p>jane</p></div>
    <div>bane</div>
</body>
</html>

Answer 1

图片根本没有出现。

图片上应为src而不是href：

<img src="http://i.imgur.com/mango.jpg" />

而不是

<img href="http://i.imgur.com/mango.jpg" />

div中的P标记会在顶部添加额外的空格。

是的默认p用于段落，因此它将包装有浏览器添加的默认边距。您可以将p保证金重置为p{margin:0}

如果没有注释掉的“vertical-align”行，div框就不会排成一行。

完成上述修正后您可以使用float:left代替display:inline-block并查看其呈现方式的差异，不确定您希望如何呈现...

像 this ??

之类的东西

Answer 2

您的代码非常奇怪，很多问题如下：

img should use src instead of href
You need to set the 'p' margin to 0
For vertical-align: middle you should use display: table-cell
Instead of 'line-height', you should use 'height' (if necessary) etc.

检查此jsfiddle：http://jsfiddle.net/grsVp/1/

Answer 3

我对代码感到困惑的几件事情：

没有注释掉的“vertical-align”行，div 盒子不排队。 这就是它对 的意义，使用它！ 请勿使用float！
<p>内的<div>标记会在顶部添加额外的空格。这是正常行为，将defaut margin（0 1em）重置为0. 已如上所述
图片根本没有显示。错误的属性链接图片已如上所述

div框不会使用属性显示排列：inline-block;

3 个答案: