Блог

Я пытаюсь лучше понять 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 должен начать расти вниз (или вертикально).

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

Вы можете использовать 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. дайте parent div исправленное width значение . Используется overflow:hidden; для хранения divs
2. измените floats внутри на divs display:inline-block;
3. установите width на правой div

4. установите a 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/

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

 .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;
    }
  

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

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