1

次のようなレイアウトを作成しようとしています。

ここに画像の説明を入力

左側に ASP.NETTreeViewコントロールを追加します。残念ながら、div としてレンダリングされるようで、改行が発生します。display:inlineこれは機能しないように見えるため、使用できないと思います。

 <asp:TreeView ID="TreeView1" runat="server" style="display:inline;"
            onselectednodechanged="TreeView1_SelectedNodeChanged" 
            ontreenodepopulate="TreeView1_TreeNodePopulate" 
            ontreenodeexpanded="TreeView1_TreeNodeExpanded">
            <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
    </asp:TreeView>

私のマークアップは次のとおりです。

<div id="mainDiv">
    <div id="filters">

    </div>
    <div id="dMiddle">
    <span id="sTreeView">
     <asp:TreeView ID="TreeView1" runat="server" style="display:inline;"
            onselectednodechanged="TreeView1_SelectedNodeChanged" 
            ontreenodepopulate="TreeView1_TreeNodePopulate" 
            ontreenodeexpanded="TreeView1_TreeNodeExpanded">
            <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
    </asp:TreeView>
    </span>
    <span id="sGrid">eventually a grid...</span>
    </div>
</div>

問題は、TreeViewスパン（またはdivまたはどこにでも）にとどまるのではなく、改行が発生することです。

これを回避する方法はありますか？

4

1 に答える 1

1

3 つの s を使用します<div>(現在の s ではなく<span>)。このような：

<div id="mainDiv">
    <div id="filters">
        Some other stuff goes up here
    </div>
    <div id="dMiddle">
        <asp:TreeView ID="TreeView1" runat="server"
                onselectednodechanged="TreeView1_SelectedNodeChanged" 
                ontreenodepopulate="TreeView1_TreeNodePopulate" 
                ontreenodeexpanded="TreeView1_TreeNodeExpanded">
                <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
        </asp:TreeView>
    </div>
    <div id="sGrid">
        Eventually a Grid goes here
    </div>
</div>

次に必要なのは、<div>sに小さな CSS を追加することだけです。

#sGrid, #dMiddle { display:inline-block; }
#dMiddle { float:left; }

そこの最初の行は、 dMiddle と sGrid<div>が同じ行にとどまるようにします (強制的な改行はありません)。

TreeView2 行目はオプションで、 ''を左にフロートさせるだけです<div>(2 つのインライン's' を<divs>うまく並べているようです)。

于 2012-06-19T13:17:27.547 に答える