css - CSS Float on resize：不需要的元素下推（边距/填充的原因）（响应式设计）

Question

我有以下问题：

我的标题由菜单、一些使用 flexslider 滑动的新闻和一个搜索输入组成：

问题：当我手动调整浏览器的大小，或者以更小的宽度重新加载它时；右元素向下跳（下推，因为没有剩余空间）

这是一个小测试：

http://jsfiddle.net/FFVzh/

有人知道解决方案吗？标题应该是响应式的，没有右元素的下推。

希望你能帮忙

Answer 1

这是因为您已经为正确的元素设置了边距（以像素为单位），您需要使用%它并且它会起作用，否则使用填充而不是边距box-sizing:border-box

Answer 2

如果您对边距的水平分量使用百分比#right，则边距将随窗口宽度缩放。

#right {
  background:yellow;
  float:right;
  width:18%;
  margin: 10px 1% 3px 0;
}