html - CSS-缩小屏幕时，使div的(display:inline-block)布局不变

这是我的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%;
     }

每行应有一个90px的图像（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旁边，它不会走如果屏幕太小以至于secondDiv内的文本需要在多行上，则在firstDiv下）。

可以做我想做的吗？我尝试给secondDiv设置100％的宽度，但这只是将secondDiv放在firstDiv下面，而不是在firstDiv旁边。

最佳答案

您可以使用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，第二个单元格将填充容器宽度的其余部分。

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

这将适用于大多数浏览器。