jquery - 保持 H1 单行

Question

我有几个 div

<div class="left">
  <h1>Title</h1>
  <p>Content</p>
</div>
...
<div class="left">
  <h1>Title</h1>
  <p>Content</p>
</div>

有些标题很长。类背后的 CSS 是

.left {
    width: 32%;
    float: left;
    margin: 5px;
}

问题是，如果用户调整浏览器的大小，对于长标题，这会将内容向下推，因此如果您有 2 个或更多 DIV 并排，一个具有短标题，一个具有长标题，它们不会排成一行向上

有没有办法通过调整 H1 标签或其他容器的大小来解决这个问题

谢谢，

JJ

score 3 · Accepted Answer

尝试将css更改为此...

.left {
    width: 32%;
    float: left;
    margin: 5px;
    white-space: nowrap;
}

该nowrap属性应该停止文本换行到下一行，无论它是否适合。

score 0 · Accepted Answer

您可以使用

@media screen and (max-width: 1024px)

例如，我给你做了一个 Jsfiddle：http: //jsfiddle.net/guillaumek/7vaEa/

score 0 · Accepted Answer

忍受它或在页面外设计它。文本是文本，需要换行。如果您使用媒体查询，您可以将 div 堆叠在每个查询之上，那么“问题”就不那么明显了。或者正如一位评论者所说，使用媒体查询使文本更小。您可能会发现这很有用：http ://css-tricks.com/css-media-queries/

3 回答 3