如何在调整大小时让元素保持在边框宽度的右侧100％宽度

Question

我试图让图像留在我的标题元素右侧，宽度为100％。问题是当我调整浏览器窗口大小时，我不想将它拖到标题中的其他元素中。我想让它完全按照Google.com工具栏在结果页面上执行的操作：共享按钮，G +按钮等如何保持在右侧，但缩小浏览器时。它们不会折叠到搜索栏中，当你将它缩小时它们会消失（也就是说，它们不会保留在右侧）。怎么做的？

我知道我可以将其从百分比更改为像素，但我无法确定它是否位于每个浏览器的浏览器窗口的右侧。

抱歉，如果这真的令人困惑，那对我来说很难说清楚，但我会回答任何问题。

google网站的一个示例是https://www.google.com/?gws_rd=ssl#q=how

Answer 1

Google的做法

因此，谷歌正在使用一种相对较新的CSS，称为灵活的盒子模型。有了它，您可以很容易地指定其中一个框应该根据窗口大小调整大小：

flex: 1 1 auto;

它将占用display: flex;父元素中的所有附加内容。由于我不想在这个答案中解释关于flex的所有内容，我建议你read this excellent article。缺点是旧版浏览器（特别是IE 9或10-）不支持它。谷歌可能会提供不同的CSS文件，但我认为这已经足以回答这个问题了。

另一种方式

您可以使用媒体查询，在屏幕宽度小于两个元素组合宽度的位置将其从float:right更改为非浮动元素。它实现起来更容易，更容易向后兼容，但缺点是必须知道两个元素的大小。