如何使用“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; 
    } 

#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;   
 
    }

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

或使用float - CSS

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

#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;   
 
}

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

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

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

例子：

width:25%; 

E：嗯，我想我missunderstood原来的问题...我想OP希望蓝格是插图中的导航和棕色格 因此，要回答这个问题： 使用

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

Answer 3

只需添加这display: inline-block到你的CSS：

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