以较小的屏幕宽度包裹浮动文本？

Question

我向左侧浮动一个标题，并在右边有一些包含几个链接的div。宽屏幕宽度一切都很好。

在较小的宽度处，链接显示在标题下方。相反，我需要标题包装。

我的内容是动态的，标题文字的长度会有所不同，链接的数量也会有所不同。因此，我不相信我可以使用％宽度。

我可以改变HTML但是我需要将标题保持在HTML中的链接之上。这是因为对于最小的媒体查询，标题将位于链接之上。

http://codepen.io/anon/pen/OPxbxG

<div class="container">
  <h1>Title goes here</h1>
  <div class="links">
    <a href="#">Link one</a>
    <a href="#">Link two</a>
  </div>
</div>

.container {
  background: grey;
  width: 60%;
  margin: auto;
  overflow: auto;
}
h1 {
  float: left;
  margin: 0;
}
.links {
  float: right;
}

Answer 1

1）首先将链接放在标记

中

2）在标题上设置overflow:hidden（或自动），而不是float:left

Updated Codepen（调整页面以查看此工作）

这样做的原因是设置overflow:hidden（或auto）会建立一个新的块格式化上下文。有关详细信息，请参阅this post。

.container {
  background: grey;
  width: 60%;
  margin: auto;
  overflow: auto;
}
h1 {
  overflow: hidden;
  margin: 0;
}
.links {
  float: right;
}

<div class="container">
  <div class="links">
    <a href="#">Link one</a>
    <a href="#">Link two</a>
  </div>
  <h1>Title goes here</h1>

</div>

Answer 2

您的意思是：http://codepen.io/anon/pen/ZYXBoB？

我只删除标题上的float:left;并将其放在DOM中的菜单之后。

Answer 3

如果CSS3是一个选项，那么您可以使用flexbox来实现这一点，而无需更改标记的顺序。

只需在容器上设置display:flex，在标题上设置flex:1即可填充剩余的视口宽度（不受链接影响）

Updated Codepen

.container {
  background: grey;
  width: 60%;
  margin: auto;
  overflow: auto;
  display: flex;
}
h1 {
  flex: 1;
  margin: 0;
}
.links {
  float: right;
}

<div class="container">
  <h1>Title goes here</h1>
  <div class="links">
    <a href="#">Link one</a>
    <a href="#">Link two</a>
  </div>
</div>