我想在' rest'之上显示div标签。 div标签。 '休息' div标签就像容器。我想在左侧显示菜单,并希望显示标题' div标签位于其余标签的上边缘。
在我的布局中,我绘制了菜单' div为绿色,这是正确的。我想显示div标签'标题'在我用红色框标记的位置。但我现在的问题是它显示在我用蓝色框绘制的底部。
.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;
}

<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;
答案 0 :(得分: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;
}
答案 1 :(得分:0)
尝试将CSS类添加到.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%;
}
答案 2 :(得分:-1)
将这两个css属性添加到&#34; .heading&#34;在你的CSS部分
.heading{
position:absolute;
top:0;
}