Question

当浏览器窗口变小时，我需要一些帮助阻止我的文本在我的图像下包裹。

HTML：

<div class='article'>
  <img src='images/fakeSlider.png' />
  <h2>Example</h2>
  <p>This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.</p>
</div>

CSS：

.article {
  min-width: 70%;
  max-width: 100%;
}

.article h2 {
  float: left;
  font-family: Cabin Bold;
  font-size: 22px;
  padding: 5px;
  margin: 5px 10px auto;
}

.article p {
  float: left;
  font-family: Cabin;
  font-size: 18px;
  padding: 5px;
  margin: 5px 10px auto;
  min-width: 50%;
  max-width: 70%;
  display: block;
}

.article img {
  min-width: 20%;
  max-width: 40%;
  float: left;
  height: 120px;
  padding: 5px;
  margin: 5px 10px auto;
}

因此;要清楚......我想要它所以图像在左侧，而标题是在图像的右上方，文本在标题下面。它看起来没问题，直到浏览器窗口变小并且文本在图像下方。我不确定我是不是很蠢，只是看不出有什么不对，但我已经尝试了一些东西但仍然无法让它发挥作用。

感谢任何帮助。感谢。

Answer 1

使用no-wrap：

.article p
{
    white-space:nowrap;
}

我测试了上面列出的代码，效果很好。如果有帮助，请标记为答案。

CSS文本环绕下图像

1 个答案: