如何使用“div”和“css”重新组织页面？

Question

我不确定如何使用红色矩形中的蓝色按钮移动搜索字段，使其成为“Поискмероприятий：”标签的右侧？

以下是代码：

<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>

Answer 1

使用CSS display: inline-block

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

＆＃13;

＆＃13;

#header {
        border: 4px solid red;
        background-color:white;
        color:black;
        text-align:left;
    }
    #header h2, #searchKeyword{
       display:inline-block;
    }
    #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;         
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或使用float - CSS

#header h2, #searchKeyword{
   float:left;
}

＆＃13;

＆＃13;

#header {
    border: 4px solid red;
    background-color:white;
    color:black;
    text-align:left;
    overflow: auto;
}
#header h2, #searchKeyword{
   float:left;
}
#searchKeyword{
   line-height:64px;
}
#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;         
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试这样： http://jsfiddle.net/o2tkn8pL/

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

示例：

width:25%;

E：嗯，我想我错过了原来的问题......我以为OP希望蓝色div介于导航和棕色div之间 所以回答这个问题： 使用

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

Answer 3

只需将此display: inline-block添加到您的css：

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