Html 如何使用“重新组织页面”；分区；及；css"；？

我不知道如何将红色矩形中带有蓝色按钮的搜索字段移动到“Пццццццццц：”标签的右侧

代码如下：

<style>
    #header {
        border: 4px solid red;
        background-color:white;
        color:black;
        text-align:left;
    }
    #nav {
        border: 4px solid green;
        line-height:20px;
        height:420px;
        width:250px;
        float:left;
        padding:5px;          
    }
    #section1 {
        border: 4px solid blue;
        width:700px;
        float:left;
        padding:5px;         
    }
    #section2 {
        border: 4px solid brown;
        background-color: gainsboro;
        width:700px;
        float:right;
        padding:5px;         
    }
</style>

<div id="header">
    <h2>Поиск мероприятий:</h2>
    <div id="searchKeyword" class="input-group">
        <i class="glyphicon glyphicon-search input-group-addon"></i>
        <input type="text" class="form-control" placeholder="Часть названия мероприятия" ng-model="actionsQuery.searchText" on-enter="queryResult()">
        <!--<span class="input-group-btn" ng-hide="!actionsQuery.searchText">-->
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="queryResult()">Найти мероприятия</button>
        </span>
    </div>
</div>

<div id="nav">
    ...
</div>

<div id="section1">
    ...
</div>

<div id="section2">
    ...
</div>

#标题{
边框：4倍纯红；
背景色：白色；
颜色：黑色；
文本对齐：左对齐；
}
#导航{
边框：4倍纯绿；
线高：20px；
高度：420px；
宽度：250px；
浮动：左；
填充物：5px；
}
#第一节{
边框：4px纯蓝色；
宽度：700px；
浮动：左；
填充物：5px；
}
#第2节{
边框：4倍纯色棕色；
背景色：gainsboro；
宽度：700px；
浮动：对；
填充物：5px；
}
Поиск мероприятий:
Найти мероприятия
...
...
...

使用CSS

#标题{
边框：4倍纯红；
背景色：白色；
颜色：黑色；
文本对齐：左对齐；
}
#标题h2，#搜索关键字{
显示：内联块；
}
#导航{
边框：4倍纯绿；
线高：20px；
高度：420px；
宽度：250px；
浮动：左；
填充物：5px；
}
#第一节{
边框：4px纯蓝色；
宽度：700px；
浮动：左；
填充物：5px；
}
#第2节{
边框：4倍纯色棕色；
背景色：gainsboro；
宽度：700px；
浮动：对；
填充物：5px；
}

Поиск мероприятий:
Найти мероприятия
...
...
...

像这样尝试：

您必须确保div的宽度不大于屏幕大小。 所以在我看来，使用固定宽度不是一个好主意。使用百分比值，您的设计也将更具响应性

例如：

width:25%;

恩，我想我误解了原来的问题。。。我以为OP希望蓝色的div介于导航和棕色div之间 因此，要回答这个问题： 使用

---

只需将此

display:inlineblock

添加到css中：

#searchKeyword, h2 {
    display:inline-block;
}

---

屏幕截图就在那里。使用浮动的原始答案是一种有效的方法。添加

#header{overflow:auto}

以确保浮动包含在header中，否则布局的其余部分可能会中断。它已移动，但未正确移动。如何显示新屏幕快照？新屏幕快照？你什么意思？它不能正常工作。我想展示一下在我添加了display:inline块之后它现在的样子；我这样做了，搜索字段移到了标签的右边，但你们可以在上面的第二个屏幕截图中看到它现在的样子。

#header h2, #searchKeyword{
       display:inline-block;
    }  

#searchKeyword, h2 {
    display:inline-block;
}