如果可用，内联块 div 适合 100% 的页面宽度答案

【问题标题】：Inline-block divs fitting 100% width of page if available如果可用，内联块 div 适合 100% 的页面宽度
【发布时间】：2014-06-11 07:14:06
【问题描述】：

有两个 div，第一个带有图像，第二个带有文本。

两个 div 都有 display:inline-block。文本 div 具有最小宽度。

如果图像宽度 + 文本最小宽度适合页面，则两个 div 应位于同一行。否则（如在移动浏览器中）文本 div 应该转到下一行。

到目前为止这是有效的，但我不能让文本 div 使用 100% 的页面宽度并且仍然位于图像 div 的右侧。

我需要的是文本 div 拉伸到整个浏览器宽度。

<div style="display:inline-block;vertical-align:top;">
    <img src="http://www.acasa.org.br/ensaio/grande/506.jpg" style="xmax-width:500px; width:100%; height:auto;">
</div>
<div style="display:inline-block;vertical-align:top;min-width:200px;max-width:500px;background-color:red;">
My text here
</div>

【问题讨论】：

标签： css

【解决方案1】：

使用display:block; float:left; 而不是display:inline-block;

【讨论】：

如果我使用 float:left 文本将围绕图像流动。我需要将文本作为一列。这个解决方案不是我想要的。
@fcaserio 是的，但是当您直接将图像与文本一起使用时会发生这种情况。在这种情况下，您将两者都包装在一个容器内，因此不会发生。这就是我们为这些容器使用 display:block 的原因。
其实图片和文字都有各自的容器。我不确定我明白你的意思..