如何为div标签添加css

Question

我想在＆＃39; rest＆＃39;之上显示div标签。 div标签。 ＆＃39;休息＆＃39; div标签就像容器。我想在左侧显示菜单，并希望显示标题＆＃39; div标签位于其余标签的上边缘。

在我的布局中，我绘制了菜单＆＃39; div为绿色，这是正确的。我想显示div标签＆＃39;标题＆＃39;在我用红色框标记的位置。但我现在的问题是它显示在我用蓝色框绘制的底部。

＆＃13;

＆＃13;

.heading{
 float:left;
 margin-top:0px;
 margin-left:170px;
 height:25px;
 width:79%;
 background-color:#15317E;
 
}
.rest {
  height: 685px;
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
.sidemenu {
  float: left;
  margin-top: 150px;
 
  height: 250px;
  width: 150px;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
}
.content {
  border-left: thick solid #f9f2f2;
}
hr {
  margin: 0;
  margin-left:170px;
  width: 1px; 
  height: 660px;
 border:0;
background: #fff;
}
.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;
  
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}

＆＃13;

  <div class="rest">
                  <div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="admin_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 -->
                        <div class="2 menu">
                          <a href="clients.php" class="astext">Clients</a>
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a href="employees.php" class="astext">Employees</a>
                        </div> <!--End of menu 3-->
                        <div class="menu 4">
                        <a href="admin_file_view.php" class="astext">Documents</a>
                        </div> <!--End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->
                   <hr>
                      <div class="heading" >
                         
                      </div>   <!-- End of heading div -->
                   <div class="content">
                     
                   </div> <!--End of content -->
                </div> <!--End of rest div -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

替换你的.heading，hr并添加新的css .side类。我认为它会被解决。

.heading{
      float: left;
      margin-top: 0px;
      margin-left: 0px;
      height: 25px;
      width: 66%;
      background-color: #15317E;

    }
    .side{
      width: 33%;
      float: left;
      display: inline-block;
    }

    hr {
      margin: 0;
      width: 1px;
      height: 660px;
      border: 0;
      background: #fff;
      float: left;
    }

Demo

Answer 2

尝试将CS​​S类添加到.side并更新.header

.heading{
 float:left;
 height:25px;
 width:79%;
 background-color:#15317E;
}
.rest {
  height: 685px;
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
.sidemenu {
  float: left;
  margin-top: 150px;

  height: 250px;
  width: 150px;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
}
.content {
  border-left: thick solid #f9f2f2;
}
hr {
  margin: 0;
  margin-left:170px;
  width: 1px; 
  height: 660px;
 border:0;
background: #fff;
}
.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;

  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
.side{
    float:left; width:19%;
}

Answer 3

将这两个css属性添加到＆＃34; .heading＆＃34;在你的CSS部分

.heading{  
   position:absolute;
   top:0;
}