浮动水平居中的div

时间:2014-03-26 13:09:57

标签: css html

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

问题:我有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;
}

1 个答案:

答案 0 :(得分:1)

您可以使用此 FIDDLE

中的媒体查询

添加此CSS:

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