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

Question

我正在制作一个响应式网页。在屏幕中，您会在第三张图片中看到问题。文本的空间太小，无法正常容纳。我可以通过使用 javascript 来解决这个问题，但我更喜欢只使用 CSS3。所有元素都是内联的，图像的大小是动态的。可能是图片是 50px（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;
}

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

提前致谢！

Answer 1

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

Answer 2

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

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

Answer 3

感谢您的解决方案，但我已经找到了最佳选择。 我在图像后添加了一个元素并给它 css:display:inline-block; width:150px。现在如果图片旁边的空间小于 150px，这个元素会自动跳转到图片下方，文字也会自动跳转。

完整代码：

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;
}