html - CSS - 制作 div(显示 :inline-block) layout not change when shrinking screen

Question

这是我的 HTML:

<div class='htmlCommentTable'>
    <div class='row'>
        <div class='firstDiv'>
            <img class='clickedFlame' src="image.png" />
        </div>
        <div class='secondDiv'>
            name <br /> first comment sample text here
        </div>
    </div>

    <div class='row'>    
        <div class='firstDiv'>
            <img class='clickedFlame' src="image.png" />    
        </div>
        <div class='secondDiv'>
            name <br /> second comment sample text here
        </div>
    </div>
</div>

这是我的 CSS:

    .htmlCommentTable {
        width: 100%;
    }

    .firstDiv {
        display: inline-block;
        width: 90px;
    }

    .secondDiv {
        display: inline-block;
    }


    .row {
        width: 100%;
     }

每一行都应该有一个 90 像素的图像 (firstDiv)，旁边还有另一个 div。

目前，如果我将屏幕缩小到足够小以使其到达 secondDiv 内的文本，则 secondDiv 会低于 firstDiv 而不是停留在 firstDiv 旁边。

如何使 90px div (secondDiv) 旁边的 div 的宽度为行内剩余内容的 100%(行的宽度为 100%，secondDiv 的宽度应为 100%-90px - 90px 是 firstDiv 的宽度)。 我需要它，以便当我缩小屏幕/浏览器时，firstDiv 的宽度保持在 90px，secondDiv 的宽度保持在 100%-90px，只有 div 的高度增加(并且 secondDiv 保持在 firstDiv 旁边，它不会去below firstDiv) 如果屏幕变得太小以至于 secondDiv 中的文本需要在多行上。

是否可以做我想做的事？我尝试将 secondDiv 的宽度设置为 100%，但这只是将 secondDiv 置于 firstDiv 下方，而不是放在 firstDiv 旁边。

Answer 1

您可以使用 CSS 表格来实现，如下所示:

.htmlCommentTable {
    width: 100%;
    background-color: beige;
}
.firstDiv {
    display: table-cell;
    width: 90px;
    background-color: lightgray;
    vertical-align: top;
}
.secondDiv {
    display: table-cell;
    border-bottom: 1px dotted blue;
    vertical-align: top;
}
.firstDiv img {
    display: block;
}
.row {
    width: 100%;
    background-color: yellow;
    display: table;
}

查看演示:http://jsfiddle.net/audetwebdesign/dFCa8/

将 display: table 应用于每个 .row 以及两个子元素 .firstDiv 和 .secondDiv应用 display: table-cell。

第一个单元格的宽度固定为 90px，第二个单元格将填充容器剩余的宽度。

作为一个表格，两个子元素将始终保持在一行上。

这适用于大多数浏览器。