CSS Divs позиционирование - PullRequest
Новая
       2

CSS Divs позиционирование

2 голосов
/ 03 ноября 2011

Я пытаюсь лучше понять CSS. Может кто-нибудь помочь мне с этим. У меня есть следующий HTML: 

<div class="DivParent">
<div class="Div1"></div>
<div class="Div2"></div>
</div>

Мне нужно расположить их, как показано на этой диаграмме: http://i150.photobucket.com/albums/s99/dc2000_bucket/divs_diagram.png

Я написал следующий CSS: 

.DivParent
{
    border: 1px solid #000000;
    padding: 0;
    margin: 0;
}
.Div1
{
    border: 4px solid #FF0000;
    padding: 0;
    margin: 0;
    float: left;
}
.Div2
{
    border: 4px solid #00FF00;
    padding: 0;
    margin: 0 0 0 10px;
    float: left;
}

Div1 должен сначала растягиваться горизонтально вправо. Div2 не должен растягиваться вообще. Div1 может сдвинуть его вправо, пока у Div2 не останется места для перехода вправо. После этого Div1 должен начать расти (или вертикально).

Вышесказанное работает, если оба Div недостаточно широки, но тогда Div2 просто помещается под Div1. Как сохранить Div2 всегда справа от Div1?

Ответы [ 4 ]

2 голосов
/ 03 ноября 2011

Вы можете использовать display:table свойство следующим образом: 

.DivParent
{
    border: 1px solid #000000;
    padding: 0;
    margin: 0;
    display:table;
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.Div1
{
    border: 4px solid #FF0000;
    padding: 0;
    margin: 0;
    display:table-cell;
}
.Div2
{
    border: 4px solid #00FF00;
    width:100px;
    height:50px;
}

Проверьте это http://jsfiddle.net/XBZad/2/

РЕДАКТИРОВАТЬ

Проверьте это http://jsfiddle.net/bGvAg/2/

Это работает в любом браузере.

1 голос
/ 03 ноября 2011

Оформить заказ на этот источник. Это будет полезно для вас! 

.DivParent
    {
        border: 1px solid #000000;
        padding: 0;
        margin: 0;
    overflow:hidden;
    }
    .Div1
    {
        border: 4px solid #FF0000;
        padding: 0;
        margin: 0;
        float:left;
        min-width:300px;
        max-width:900px;
        min-height:100px !important;
        height:auto;
        width:auto;
    }
    .Div2
    {
        border: 4px solid #00FF00;
        width:150px;
        height:50px;
        float:left;
    }
1 голос
/ 03 ноября 2011

Вы могли бы сделать это

  1. дать parent div фиксированный width.Используйте overflow:hidden; для хранения divs
  2. , измените floats на внутренней стороне divs на display:inline-block;
  3. , установите width справа div

  4. установите max-width слева div

    .DivParent{
    border: 1px solid #000000;
    padding: 0;
    margin: 0;
    overflow:hidden;
    width:550px;
}

.Div1{
    border: 4px solid #FF0000;
    padding: 0;
    margin: 0;
    max-width:400px;
    display:inline-block;
}

.Div2{
    border: 4px solid #00FF00;
    padding: 0;
    margin: 0 0 0 10px;
    width:120px;
    display:inline-block;
    vertical-align:top;
    height:100px;
}

Пример: http://jsfiddle.net/P6SJq/

0 голосов
/ 03 ноября 2011

Поплавок означает .. ну, поплавок.Не фиксируется.Для предотвращения перемещения div2 под одним из div должен быть статическим, вероятно, левым.Тем не менее, это означает, что вам нужно правильно разместить div2 (и поместить его перед div1).Тогда проблема будет в том, что div2 всегда будет справа, даже если содержание div1 минимально.

Я не думаю, что можно делать то, что вы хотите, используя только HTML, который у вас есть.Вы должны будете использовать некоторые контейнеры div, чтобы предотвратить перенос.

...