html - 在段落中添加 img 会导致其所有相邻的 div 略微向下移动

Question

我的 webpage 上有一组 div使用以下 HTML 和 CSS。

    <style type="text/css">
        .div-set {
            margin: 5px 2px;
        }
            .div-set > .widget:nth-child(3n-1) {
                margin: 20px 32px;
            }

        .widget {
            width: 300px;
            height: 300px;
            border: 2px solid #dbdbdb;
            padding: 0px;
            position: relative;
            display:inline-block;
        }
            .widget h2 {
                color: white;
                text-align: center;
                margin: 0;
                padding: 2px 5px;
                font-weight: bold;
                margin: 2px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
            }
            .widget p {
                padding: 3px 10px;
                padding-bottom: 15px;
            }
            .widget > a {
                position:absolute;
                bottom:0px;
                right:0px;
                text-decoration:none;
                background:#dbdbdb;
                color:black;
                padding:2px;
                border-bottom-right-radius:5px;
            }
    </style>

    <div class="div-set">
        <div class="widget">
            <h2>Founder</h2>
            <p>
                <b>Late Shri Brahmdutta Sharma</b> has founded this
                Goshala in 1999 with providing shelter to only three cows and number of cows becomes thirty in just first two months.
            </p>
            <a href="#">Learn more</a>
        </div>
        <div class="widget">
            <h2>Founder</h2>
            <p>
                <b>Late Shri Brahmdutta Sharma</b> has founded this
                Goshala in 1999 with providing shelter to only three cows and number of cows becomes thirty in just first two months.
            </p>
            <a href="#">Learn more</a>
        </div>
        <div class="widget">
            <h2>Founder</h2>
            <p>
                <b>Late Shri Brahmdutta Sharma</b> has founded this
                Goshala in 1999 with providing shelter to only three cows and number of cows becomes thirty in just first two months.
            </p>
            <a href="#">Learn more</a>
        </div>
        <div class="widget">
            <h2>Founder</h2>
            <p>
                <b>Late Shri Brahmdutta Sharma</b> has founded this
                Goshala in 1999 with providing shelter to only three cows and number of cows becomes thirty in just first two months.
            </p>
            <a href="#">Learn more</a>
        </div>
        <div class="widget">
            <h2>Founder</h2>
            <p>
                <b>Late Shri Brahmdutta Sharma</b> has founded this
                Goshala in 1999 with providing shelter to only three cows and number of cows becomes thirty in just first two months.
            </p>
            <a href="#">Learn more</a>
        </div>
        <div class="widget">
            <h2>Founder</h2>
            <p>
                <img runat="server" src="~/CSS/slide/btns-next-prev.png" style="height:50px; width:100px;" alt="Alternate Text" />
                <b>Late Shri Brahmdutta Sharma</b> has founded this
                Goshala in 1999 with providing shelter to only three cows and number of cows becomes thirty in just first two months.
            </p>
            <a href="#">Learn more</a>
        </div>
    </div>

我在最后一个 div 中使用 img 标签添加了一张图片，但正如您在 webpage 上看到的那样它所有相邻的 div 都稍微移动到底部，如下图所示:

将 display 属性更改为 inline-table 在 Firefox 中有效，但在 chrome 中无效。我也尝试从图像中删除 float 属性，但没有成功。

是什么导致了这种意想不到的行为……？？我该如何解决...？

请注意:如果我在一行中的所有三个 div (.widget) 中添加图像(一行有三个 div)，则不会发现此类问题.如果我在一行中的两个 div 中添加图像，那么剩下的一个会稍微移到底部。

Here is my page

Answer 1

是什么导致布局中断？

考虑基于原始帖子的简化 HTML:

<div class="widget-panel ex1">
    <div class="widget">
        <p>Some text on a line that can wrap around to a second line.</p>
    </div>
    <div class="widget">
        <p>Same text.</p>
    </div>
    <div class="widget">
        <p>Sane text.</p>
    </div>
    <div class="widget">
        <p><img src="http://placehold.it/100x50"> An image and sun text.</p>
    </div>
</div>

基本上，一个容器 div.widget-panel 和四个子元素 div.widget。

CSS如下:

.widget-panel {
    border: 1px dotted blue;
    width: 410px;
}
.widget {
    display: inline-block;
    border: 1px dashed gray;
    width: 200px;
    height: 100px;
}
.widget p {
    outline: 1px dotted red;
}

以及用于演示目的的两条附加规则:

.ex1 .widget {
    vertical-align: baseline;    
}
.ex2 .widget {
    vertical-align: top;    
}

和 fiddle :http://jsfiddle.net/audetwebdesign/nSWGW/

这里发生的事情是内联 block 被格式化为单个内联框，由于父元素的宽度限制 (410px) 而换行到第二行。

在父容器中，行内 block 中的文本元素垂直放置在基线上，这样每个段落的最底部行都落在相同的(假想的)水平线上。

当您添加内联图像时，您基本上会增加内联框的高度，这会导致内联 block 向上移动，因为浏览器将底线对齐在同一基线上。

在示例 2 中，使用了 vertical-align: top，这告诉浏览器将文本元素沿行内框的上边缘对齐。结果，文本段落的顶行对齐。但是，顶线也与内联图像的顶部对齐，这是正确的，但可能不是您想要的。您可以使用 float 来解决这个问题。

所有这些都是格式化内联元素的正确 CSS 兼容行为。