我的目标是在左侧treeview
和右侧content place holder
。这是HTML
:
<body>
<form id="formMenu" runat="server">
<asp:TreeView ID="treeMenu" runat="server" DataSourceID="SiteMapDataSource1">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
这是我的CSS
:
#treeMenu
{
float:left;
width:200px;
}
#content
{
float:right;
margin-left:auto;
margin-right:auto;
}
浮子过早工作。 #content
浮动到#treeMenu
的右侧,但其浮动太右,其位置低于 #treeMenu
,而不是在其右侧。
我尝试使用overflow:hidden
,但它没有产生任何影响。
请帮助我。谢谢你的帮助。
答案 0 :(得分:2)
您可以将overflow:auto
添加到#content
,不要在其上设置任何float
。
#menubar {
float:left;
width:200px;
background:lime;
}
#content {
overflow:auto;
background:orange;
}
&#13;
<div id="menubar">menubar</div>
<div id="content">Chocolate liquorice gummi bears biscuit macaroon cheesecake candy sugar plum. Liquorice sugar plum caramels cookie candy toffee pie. Bonbon pudding cotton candy. Soufflé bear claw sesame snaps soufflé pudding chupa chups pudding ice cream candy. Marshmallow carrot cake muffin apple pie powder. Tootsie roll cotton candy cheesecake. Dragée candy canes toffee. Dragée toffee macaroon. Ice cream gummies chocolate sugar plum. Oat cake danish powder cake sugar plum biscuit. Gummi bears liquorice jelly beans. Chocolate bar biscuit gummi bears pastry chocolate cake marzipan cake.</div>
&#13;
或者,您可以为这两个元素设置使用table-cell
。
#menubar {
display:table-cell;
width:200px;
background:lime;
}
#content {
display:table-cell;
background:orange;
}
&#13;
<div id="menubar">menubar</div>
<div id="content">Chocolate liquorice gummi bears biscuit macaroon cheesecake candy sugar plum. Liquorice sugar plum caramels cookie candy toffee pie. Bonbon pudding cotton candy. Soufflé bear claw sesame snaps soufflé pudding chupa chups pudding ice cream candy. Marshmallow carrot cake muffin apple pie powder. Tootsie roll cotton candy cheesecake. Dragée candy canes toffee. Dragée toffee macaroon. Ice cream gummies chocolate sugar plum. Oat cake danish powder cake sugar plum biscuit. Gummi bears liquorice jelly beans. Chocolate bar biscuit gummi bears pastry chocolate cake marzipan cake.</div>
&#13;
答案 1 :(得分:0)
我需要将TreeView
与div
打包在一起,然后使用div
&#39; id
执行CSS
以使其正常工作