Question

当我调整窗口大小时，右浮动div移动到居中的Div。如何在右侧粘贴右浮动div，以便在调整窗口大小时不会移动？

<div id="topbar">
    <div id="wrapper960">
     Navigation menu
    </div>
    <div id="search">
     Searchbox
    </div>
</div>

#topbar{width:100%; vertical-aligh:middle; }
#wrapper960{width:960px; margin:0px auto; min-height:25px;}
#search{float:right; margin:-25px 0px 0px 0px}

Answer 1

我立即在#topbar{width:100%; vertical-aligh:middle; }注意到您vertical-align拼错了vertical-aligh。

尽管如此，作为一个整体，我建议让您的代码更加语义地描述您尝试表达的内容，遵循更紧密的现代Web编码标准。

我为你做了This JSFiddle，希望这代表了你正在寻找的导航栏附近的东西。

http://jsfiddle.net/ChaseMoskal/GHBLG/2/

好运的朋友！ 快乐编码！ //大通。

编辑：

为了更明确地回答这个答案而不仅仅是JSFiddle，我认为将导航栏表示为无序列表会很好，最后会有搜索框。

<ul class="topbar">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <div class="search">Search</div>
</ul>

对于JSFiddle中的CSS，我list-style:none;无序列表;我display:inline-block;列表项（float:left;将是一个完全可以接受的，也许更多的跨浏览器方式也可以这样做）;我float:right;搜索框。列表中的::after伪元素清除浮动列表内容，而width:100%;max-width:960px;允许您的条形图为小窗口动态缩小。 CSS中的其他所有内容都只是为了彰显。 //追逐。

div移动到windows resize上的另一个div

1 个答案:

我为你做了This JSFiddle，希望这代表了你正在寻找的导航栏附近的东西。

编辑：