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

问题在于，如果用户调整浏览器的大小，对于长标题，这会将内容向下推，因此，如果您有两个或更多DIV并排，其中一个标题较短且标题较长，则不会排队

通过调整H1标签或其他带容器的东西

，可以解决这个问题吗？

谢谢，

JJ

Answer 1

尝试将css更改为此...

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

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

Answer 2

您可以使用

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

我以Jsfiddle为例： http://jsfiddle.net/guillaumek/7vaEa/

Answer 3

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