浮动水平居中的div

Question

对不起，如果这是一个重复的问题，但我找不到简单的解决方案。

问题：我有div显示时间轴。这个div位于顶部：

margin: 0 auto

现在我有一个搜索字段，应该显示在页面的右上角。当窗口宽阔时，两个元素都应显示在顶部。

如果窗口太小，时间轴应浮动在搜索字段下。

我的Html：

<div class="search">
    <form.../>
</div>
<div class="timeline">...</div>

我的Css：

.search {
    float: right;
    margin-right: 14px;

    position: relative;
    top: -1px;
}

.timeline{
    width: 768px;
    height: 15px;
    margin: 0 auto;
    overflow: visible;
    padding: 48px 40px 15px;
}

Answer 1

您可以使用此 FIDDLE ：

中的媒体查询

添加此CSS：

@media screen and (max-width:1000px) {
    .search {
        float:none;
        margin: 0 auto;
    }
}