Горизонтальное выравнивание двух divs

Question

Я знаю, что существует много потоков по этому вопросу, , но я не могу понять, почему мой код не работает. Я нашел хороший образец here Итак, у меня есть div, и я хочу отобразить в нем еще два divs - рядом друг с другом. Зеленый цвет должен отображаться с левой стороны и заполнять 75% по горизонтали, а синий - только 25%, но отображается горизонтально рядом с зеленым div и не вертикально.

Смотрите код:

<div class="section2"> 
      <div class="referencesPics"> 
       <div class="line1"> 
        <div class="leftPic"> 
        hi 
        </div> 
        <div class="rightPic"> 
        hallo 
        </div> 
       </div> 
       <div class="line2"> 
        <div class="leftPic"> 
        </div> 
        <div class="rightPic"> 
        </div> 
       </div> 
       <div class="line3"> 
        <div class="leftPic"> 
        </div> 
        <div class="rightPic"> 
        </div> 
       </div> 
       <div class="line4"> 
        <div class="leftPic"> 
        </div> 
        <div class="rightPic"> 
        </div> 
       </div> 
      </div>   
     </div> 

КСС:

.section2 { 
    height:100%; 
} 

.section2 .referencesPics { 
    height:25%; 
} 

.section2 .referencesPics .line1 { 
    height:100%; 
    background-color:blue; 
    display: inline-block; *display: inline; zoom: 1; vertical-align: top; 
} 

.section2 .referencesPics .line1 .leftPic { 
    height:100%; 
    width:75%; 
    background-color:green; 
    display: inline-block; *display: inline; zoom: 1; vertical-align: top; 
} 

.section2 .referencesPics .line1 .rightPic { 
    height:100%; 
    width:25%; 
    background-color:yellow; 
display: inline-block; *display: inline; zoom: 1; vertical-align: top; 
} 

.section2 .referencesPics .line2 { 
    height:100%; 
    background-color:yellow; 
} 

.section2 .referencesPics .line3 { 
    height:100%; 
    background-color:brown; 
} 

.section2 .referencesPics .line4 { 
    height:100%; 
    background-color:green; 
} 

, а также увидеть Fiddle

Спасибо за помощь!

Answer 1

Обновлен ваш код.

.section2 { 
 
    width: 100%; 
 
} 
 
.leftPic { 
 
    width: 75%; 
 
    background-color: green; 
 
    float: left 
 
} 
 
.rightPic { 
 
    width: 25%; 
 
    float: left; 
 
    background-color: blue; 
 
}

<div class="section2"> 
 
    <div class="referencesPics"> 
 
    <div class="line1"> 
 
     <div class="leftPic"> 
 
     hi 
 
     </div> 
 
     <div class="rightPic"> 
 
     hallo 
 
     </div> 
 
    </div> 
 

 
    <div class="line1"> 
 
     <div class="leftPic"> 
 
     hi 
 
     </div> 
 
     <div class="rightPic"> 
 
     hallo 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы можете заставить его работать с display:inline-block, но вы собираетесь должны удалить пробелы в HTML между дивы для этого, чтобы работать правильно

.line1 { 
    width: 100%; 
} 

.leftPic { 
    width: 75%; 
    background-color: green; 
    display:inline-block; 
} 
.rightPic { 
    width: 25%; 
    display:inline-block; 
    background-color: yellow; 
} 

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

Здесь работает solution