CSS确保图像旁边的文本有足够的空间

Question

我正在制作自适应网页。在屏幕中，您会看到第3张图像中的问题。文本的空间要小到正常。我可以通过使用javascript解决这个问题，但我更喜欢使用CSS3。所有元素都是内联的，图像的大小是动态的。可能是图像是50像素（img 1），但也可能是图像足够宽以达到全宽（img 2）。

我的HTML：

<h2>title</h2>
<div class="newsItemImage"></div>
<p class="newsItemText"></p>

我的css：

#pageNewsItem h2 {
    margin: 10px 15px;
}

.newsItemImage {
    float: left;
    margin: -15px 0 -5px 0;
    max-width: 100%;
    border: 15px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
}

.newsItemText {
    margin: 0 15px 15px 15px;
}

我使用不可见的边框和框大小，否则我不能使用max-width并给它一个边距。如果有人知道更好的解决方案，请随时告诉我。

提前致谢！

Answer 1

感谢您的解决方案，但我已经找到了最好的选择。 我在图像后面添加了一个元素并将其赋予css：display:inline-block; width:150px。现在，如果图像旁边的空间小于150像素，则此元素会自动跳转到图像下方，文本也是如此。

完整代码：

HTML：

<h2 class="pageHeaderH2">BREEAM - globale milieu - beoordeling van gebouwen</h2>
<img src="img/dummyImages/newsItemThumb1.jpg" id="newsItemImage">
<div id="minSpace"></div>
<p class="newsItemText">Lorem ipsum dolor sit amet, con ... iaculis ul</p>

CSS：

#pageNewsItem h2 {
    margin: 10px 15px;
}

#newsItemImage {
    float: left;
    margin: -15px 0 -5px 0;
    max-width: 100%;
    border: 15px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
}

#minSpace{
    display:inline-block;
    width:150px;
}

.newsItemText {
    margin: -15px 15px 15px 15px;
}

Answer 2

CSS不能用于执行内容大小的计算。我建议您将左侧图像的大小标准化，方法是将其放入一定大小的容器中（很可能是响应式网站的宽度百分比），然后强制图像获取此宽度知道宽度。然后，您可以使用响应断点在每种情况下准确地将文本放在图像下方。

Answer 3

您可以设置用于文字的<p>或<span>，或设置<img> {display:block;}以清除其他元素。

最好能提供HTML代码，以便检查结构。