This topic created in 3212 days ago, the information mentioned may be changed or developed.

问题 1

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" type="text/css" href=""> --> <style> span { border: 5px solid green; } img { border: 5px solid red; } </style> </head> <body> <div> <span ><img alt="图片" src="file:///D:/HTML/Head%20First%20HTML%20and%20CSS/chapter%2011/starbuzz/images/headerLogo.gif"></span> </div> </body> </html>

代码是这样的，然后效果是

其中绿色的是 span 元素的边框，红色的是图片的。我想问的问题是，为什么 span 元素没有完全包围 img 元素并且看起来占据了一个如此奇怪的空间呢？

问题 2

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" type="text/css" href=""> --> <style> div { border: 5px solid yellow; } img { border: 5px solid red; } #T { /* margin-left: auto; */ margin-right: 0xp; } </style> </head> <body> <div> <img alt="图片" src="file:///D:/HTML/Head%20First%20HTML%20and%20CSS/chapter%2011/starbuzz/images/headerLogo.gif"> <img id="T" alt="图片" src="file:///D:/HTML/Head%20First%20HTML%20and%20CSS/chapter%2011/starbuzz/images/headerLogo.gif"> </div> </body> </html>

现在在一个 div 中有两个图片左右排列，我想要让右边那个图片紧贴窗口右侧，如果压扁窗口也会自动移动。尝试了将它的 margin-left 设为 auto （不是说 auto 是自动填满的意思吗），将右侧图片与左侧图片间的外边距自动填满，那图片不就自动到了窗口最右边了吗？另一个想法是 margin-right 设为 0px，那图片也应该会在自动贴在窗口左边吧？
但是这两个方法都失败了，请问两者为何不成功呢？（ PS:我知道可以使用绝对定位或者浮动定位实现这个效果，我就是不明白为何我这两种想法是失败的呢？）

感谢愿意解答的好心人！~

4 replies 2017-07-30 19:18:42 +08:00

doing

Jul 30, 2017

1.span 是行级元素，你如果把它变成 display:block 看结果对比。
2.压扁窗口也会自动移动。不明白意思

Newyorkcity

Jul 30, 2017

@doing
1 行级元素不会随着它的内容（ img 元素）而变化它的宽度吗？
2 以 V 站为例，在版面旁边不是有一个个人状态的块元素嘛。不论怎么把窗口的左右距离缩短，这个块元素都会在版面和看帖区域的右侧。我的意思就是一个块元素它紧贴着窗口的右边缘，然后不管怎么样都贴着。
边 A...................B 边
↓把窗口变窄
边 A.........B 边
就这种效果

TabGre

Jul 30, 2017

- 为什么 span 元素没有完全包围 img 元素并且看起来占据了一个如此奇怪的空间呢？
你这么认为的依据是什么？

我的看法：span 是 inline 元素，没有 width,height 值，它的高度由内容决定，而 img 为 replaced element，这就意味着它没有高度，所以 span 没有你想想中的那么表现。

[jsfiddle]( https://jsfiddle.net/8h52806n/)

Newyorkcity

Jul 30, 2017

@TabGre 谢谢。。。

两个新手的 HTML/CSS 问题，感谢愿意解答的好心人

问题 1

问题 2