Float несколько CSS-дивидов - PullRequest
Новая
       7

Float несколько CSS-дивидов

0 голосов
/ 04 февраля 2012

Возможно ли вообще, что розовый div (link3 / link4) может начинаться с той же верхней позиции, что и div (link1 / link2)?

Или мне все еще нужен div-обертка для левой стороны?кнопка и тридив и другая для правой кнопки + датагридив?

enter image description here

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>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2012

Не могли бы вы просто поместить DIV-обертку вокруг #TreeButtonBar и #TreeWrapper и плавать влево?

Или вместо этого вы можете слегка изменить порядок ваших DIV и использовать строки. 

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

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

Это всего лишь несколько способов сделать то, что вы хотите. Вы уже пробовали это или что-то подобное?

0 голосов
/ 04 февраля 2012

Проверьте эту скрипку. http://jsfiddle.net/T38Tn/

Убедитесь, что вы развернули панель результатов в скрипте.

edit: в этом решении вам не нужно использовать никакие обертки.

...