浮动多个css div

Question

粉红色（link3 / link4）div可以在div（link1 / link2）的同一顶部位置开始吗？

或者我仍然需要左按钮栏和Treediv的包装div以及右按钮栏+ datagriddiv的另一个？

CSS

html 
{
    background-color:Yellow;   
    margin: 0;
    padding: 0;
    height:100%; 
}

body {
    background-color:Green;    
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 10;
    padding: 0;
    height:100%;
}

a:link, a:visited, 
a:active, a:hover {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

a:hover {
    background-color: #c7d1d6;
}

#TreeWrapper{
   background-color:Aqua; 
   float:left;
    width:200px; 
    height:100%; 
    overflow:auto;     
}

#DataGridWrapper{
     background-color:Silver;
     height:100%;    
     overflow:auto; 
}

.clear
{
    clear:left;    
}

#DataGridButtonBar
{
    background-color:Fuchsia;   


}

#TreeButtonBar
{  
    width:200px;
    background-color:Maroon;    
}

HTML ：

 <div id="TreeButtonBar">
        @Html.ActionLink("link1", "AddNode")
        @Html.ActionLink("link2", "DeleteNode")
    </div>    

    <div id="TreeWrapper">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
    </div>

    <div id="DataGridButtonBar">
        @Html.ActionLink("link3", "AddTeststep")
        @Html.ActionLink("link4", "DeleteTeststep")
    </div>

    <div id="DataGridWrapper">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
    </div>


<div class="clear"></div>

Answer 1

检查这个小提琴。 http://jsfiddle.net/T38Tn/

确保展开小提琴中的结果面板。

编辑在该解决方案中，您不必使用任何包装器。

Answer 2

难道你不能只在#TreeButtonBar和#TreeWrapper周围放置一个DIV包装器并将其向左浮动吗？

或者，您可以稍微更改DIV的顺序并使用行。

<div>
<div id="TreeButtonBar"></div>
<div id="DataGridButtonBar"></div>
</div>

<div>
<div id="TreeWrapper"></div>
<div id="DataGridWrapper"></div>
</div>

这些只是我能想到做你想做的几种方式。你有没有试过这些或类似的东西？