CSS - 缩小屏幕时使 div 的（显示：inline-block）布局不改变

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 旁边，它不会去低于 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，第二个单元格将填充容器宽度的其余部分。

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

这适用于大多数浏览器。

Answer 2

将following 代码应用于行，您的问题应该得到解决。 :)

overflow: hidden;
white-space: nowrap;
text-overflow: hidden;

另外，如果你想添加neat overflow effect，你可以使用这个代码：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Answer 3

您可能想使用浮点数。阅读它们。非常有用。

回到你的问题：

1) http://jsfiddle.net/V2SGx/

.firstDiv {
    float: left;
}

很可能这就是您想要和需要的全部。

2) http://jsfiddle.net/V2SGx/1

.secondDiv {
    margin-left: 100px;
}

如果您不想让 secondDiv 中的任何文本出现在 firstDiv 之下。只需在 .secondDiv 上设置适当的边距。假设你知道 .firstDiv 现在和永远有多宽。

Answer 4

有一个简单而干净的解决方案：背景图片。 您只需将图像应用为左侧的背景，然后使用 padding-left 将文本缩进 90 像素。
见CodePen example here。

我为更多语义代码更改了您的 html，摆脱了无用的 div。当然，这个例子也适用于你的 html 结构。