<!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 元素并且看起来占据了一个如此奇怪的空间呢?
<!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:我知道可以使用绝对定位或者浮动定位实现这个效果,我就是不明白为何我这两种想法是失败的呢?)
1
doing 2017-07-30 17:18:52 +08:00 1
1.span 是行级元素,你如果把它变成 display:block 看结果对比。
2.压扁窗口也会自动移动。不明白意思 |
2
Newyorkcity OP @doing
1 行级元素不会随着它的内容( img 元素)而变化它的宽度吗? 2 以 V 站为例,在版面旁边不是有一个个人状态的块元素嘛。不论怎么把窗口的左右距离缩短,这个块元素都会在版面和看帖区域的右侧。我的意思就是一个块元素它紧贴着窗口的右边缘,然后不管怎么样都贴着。 边 A...................B 边 ↓把窗口变窄 边 A.........B 边 就这种效果 |
3
TabGre 2017-07-30 17:26:05 +08:00 1
- 为什么 span 元素没有完全包围 img 元素并且看起来占据了一个如此奇怪的空间呢?
你这么认为的依据是什么? 我的看法:span 是 inline 元素,没有 width,height 值,它的高度由内容决定,而 img 为 replaced element,这就意味着它没有高度,所以 span 没有你想想中的那么表现。 [jsfiddle]( https://jsfiddle.net/8h52806n/) |
4
Newyorkcity OP @TabGre 谢谢。。。
|