V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Newyorkcity
V2EX  ›  问与答

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

  •  
  •   Newyorkcity · 2017-07-30 16:35:44 +08:00 · 1388 次点击
    这是一个创建于 2675 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题 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 条回复    2017-07-30 19:18:42 +08:00
    doing
        1
    doing  
       2017-07-30 17:18:52 +08:00   ❤️ 1
    1.span 是行级元素,你如果把它变成 display:block 看结果对比。
    2.压扁窗口也会自动移动。不明白意思
    Newyorkcity
        2
    Newyorkcity  
    OP
       2017-07-30 17:26:01 +08:00
    @doing
    1 行级元素不会随着它的内容( img 元素)而变化它的宽度吗?
    2 以 V 站为例,在版面旁边不是有一个个人状态的块元素嘛。不论怎么把窗口的左右距离缩短,这个块元素都会在版面和看帖区域的右侧。我的意思就是一个块元素它紧贴着窗口的右边缘,然后不管怎么样都贴着。
    边 A...................B 边
    ↓把窗口变窄
    边 A.........B 边
    就这种效果
    TabGre
        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/)
    Newyorkcity
        4
    Newyorkcity  
    OP
       2017-07-30 19:18:42 +08:00
    @TabGre 谢谢。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1064 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:58 · PVG 03:58 · LAX 11:58 · JFK 14:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.