我想设置类似的布局
我认为我将不得不设置这样的东西
表示主 div,在主 div 的顶部,我有其他 div。我用过这样的东西
<div id="headerImage" >
<div id="help_About">
<a href="#">Help</a>
<a href="#">About</a>
</div>
<div id="myLogout">
<input type="text" value="Basit" />
<a href="#">Logout</a>
</div>
<div id="myImage">
<img width="20" height="20" src="resources/images/tools_icon.png" />
</div>
<img src="resources/images/2b.jpg"/>
</div>
#headerImage{
border-style :solid;
border-width: thin;
width: 100%;
height: 20%;
background: url(${imgUrl}/2b.jpg) no-repeat top left;
padding: 0px;
border-top: 0px;
border-bottom: 5px #eeeeee solid;
z-index: 1;
}
#headerImage #help_About{
margin-left: 10%
margin-top: 2%;
display: inline-block;
border-style :solid;
border-width: thin;
padding: 2px;
border-top: 2px;
z-index: 2;
}
#headerImage #myLogout{
margin-left: 30%
margin-top: 4%;
display: inline-block;
border-style :solid;
border-width: thin;
padding: 2px;
border-top: 2px;
z-index: 2;
}
#headerImage #myImage{
margin-right: 10%
margin-top: 4%;
display: inline-block;
border-style :solid;
border-width: thin;
padding: 2px;
border-top: 2px;
z-index: 2;
}
我只是给出了物理外观的边框样式和宽度和高度。但后来我得到了这样的东西
我做错了什么?如何设置 div 的布局?
谢谢