Я пытаюсь выровнять DIV для веб-страницы.Выравнивание DIV рядом с одним и под другим

Раздел, который я пытаюсь создать на данный момент, состоит из трех DIV в пределах DIV. У меня есть один выровненный слева, и я надеялся выровнять два других справа, под друг друга. (Как указано ниже)

3 DIVS- How they should look! Мне удалось выровнять DIV справа и вверху DIV слева. Мне немного сложно получить третье изображение рядом с первым И под вторым.

Это код, который у меня есть до сих пор!

.womenOne{ 
 
    width: 383px; 
 
    height: 634px; 
 
    background-image:url(../images/woman1.jpg); 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-bottom:20px; 
 
} 
 

 
.womenTwo{ 
 
    width: 780px; 
 
    height: 296px; 
 
    margin-right: 10px; 
 
    margin-bottom: 21px; 
 
    display: inline-block; 
 
    background-image:url(../images/woman3.jpg); 
 
} 
 

 
.womenThree{ 
 
    width: 780px; 
 
    height: 321px; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    margin-top: 21px; 
 
    display: inline-block; 
 
    background-image: url(../images/woman2.jpg); 
 
    float: right; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    
 
    <body> 
 
      <!-- WOMEN --> 
 
      <h2> women </h2> 
 
      <div class="women"> 
 
       <div class="womenOne"> 
 
        <p> On Trend </p> 
 
       </div> 
 
       
 
       <div class="womenTwo"> 
 
        <p> Winter Wonderful </p> 
 
       </div> 
 
       
 
       <div class="womenThree" float="left"> 
 
        <p> Winter Sun Essentials </p> 
 
       </div> 
 
      </div> 
 
    </body> 
 
    </html>

Любая помощь о том, как решить эту проблему, было бы здорово!

источник

2016-12-27 Hayley McNicol

Float все элементы для лучшего Managment содержания

сделав второй и третий элемент float:right, первый float:left и третий clear: right мне удалось укладывали div с и вы уже искали.

Bellow - это рабочий пример с использованием вашего кода.

div { 
 
border:solid 1px black; 
 
} 
 
.womenOne{ 
 
    width: 383px; 
 
    height: 634px; 
 
    background-image:url(../images/woman1.jpg); 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-bottom:20px; 
 
    float: left; 
 
} 
 

 
.womenTwo{ 
 
    width: 780px; 
 
    height: 296px; 
 
    margin-right: 10px; 
 
    margin-bottom: 21px; 
 
    display: inline-block; 
 
    background-image:url(../images/woman3.jpg); 
 
    float: right; 
 
} 
 

 
.womenThree{ 
 
    width: 780px; 
 
    height: 321px; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    margin-top: 21px; 
 
    display: inline-block; 
 
    background-image: url(../images/woman2.jpg); 
 
    float: right; 
 
    clear:right; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    
 
    <body> 
 
      <!-- WOMEN --> 
 
      <h2> women </h2> 
 
      <div class="women"> 
 
       <div class="womenOne"> 
 
        <p> On Trend </p> 
 
       </div> 
 
       
 
       <div class="womenTwo"> 
 
        <p> Winter Wonderful </p> 
 
       </div> 
 
       
 
       <div class="womenThree" float="left"> 
 
        <p> Winter Sun Essentials </p> 
 
       </div> 
 
      </div> 
 
    </body> 
 
    </html>

источник

2016-12-27 19:21:53 DominicValenciana

Выравнивание DIV рядом с одним и под другим

ответ

Float все элементы для лучшего Managment содержания

Смежные вопросы