简体   繁体   English

带简单浮动的asp css在treeview上不起作用

[英]asp css with simple float not working on treeview

My goal is to make a treeview in left and content place holder in its right. 我的目标是在左侧创建treeview在右侧创建content place holder This is the HTML : 这是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>

And this is my CSS : 这是我的CSS

#treeMenu
{
    float:left;
    width:200px;
}

#content
{
    float:right;
    margin-left:auto;
    margin-right:auto;
}

The float is working prematurely. 浮子过早工作。 The #content floated to the right of #treeMenu , but its floated too right and its position is below the #treeMenu instead just at the right of it. #content浮动到#treeMenu的右侧,但其浮动太右,其位置在#treeMenu 下方 ,而不是它的右侧。

I tried to use overflow:hidden but its not giving any effect. 我试图使用overflow:hidden但没有任何效果。

Please kindly help me. 请帮助我。 Thanks for your help. 谢谢你的帮助。

You could add overflow:auto to #content , do not set any float on it. 您可以将overflow:auto添加到#content ,不要在其上设置任何float

 #menubar { float:left; width:200px; background:lime; } #content { overflow:auto; background:orange; } 
 <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> 

Or, you could set use table-cell for both elements. 或者,您可以将use table-cell设置为两个元素。

 #menubar { display:table-cell; width:200px; background:lime; } #content { display:table-cell; background:orange; } 
 <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> 

我需要用div包装TreeView并使用divid来进行CSS使其工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM