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

Question

我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>

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

display将属性更改为inline-table在 Firefox 中工作，但不能在 chrome 中工作。我试过删除float图像中删除属性，但没有运气。

是什么导致了这种意外行为..？？我该如何解决..？

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

这是我的页面

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;    
}

和小提琴：http: //jsfiddle.net/audetwebdesign/nSWGW/

这里发生的情况是，内联块被格式化为单个内联框，由于父元素的宽度限制（410px），该内联框将换行到第二行。

在父容器中，内联块中的文本元素垂直定位在基线上，这样每个段落的最底部的行都落在同一（假想的）水平线上。

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

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

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

Answer 2

如果您添加vertical-align: middle到.widget规则集中，这是固定的。

Answer 3

尝试将您的规则集更改为以下内容。问题出在display:inline-block;规则上，.widget{}我不确定为什么这会导致您出现问题。

.div-set {
    margin: 5px 2px;
    overflow: hidden;
}
.widget {
    width: 300px;
    height: 300px;
    border: 2px solid #dbdbdb;
    padding: 0px;
    position: relative;
    overflow: hidden;
    float: left;
    margin: 10px;
}