1

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

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

所以; 要清楚...我想要它，所以图像在左侧，而标题在图像的右上角，文本在标题下方。在浏览器窗口变小并且文本位于图像下方之前，它看起来还不错。我不确定我是不是很愚蠢，只是看不出有什么问题，但我已经尝试了一些事情，但仍然无法让它发挥作用。

任何帮助表示赞赏。谢谢。

4

1 回答 1

2

使用无包装：

.article p
{
    white-space:nowrap;
}

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

于 2013-11-01T01:34:10.530 回答