WebページのDIVを整列しようとしています。DIVを1つ下に整列する

私が現在作成しようとしているセクションは、DIV内に3つのDIVで構成されています。私は1つを左に整列させ、私は互いの下で他の2つを右に整列させたいと考えていました。（以下のように）

3 DIVS- How they should look! 私はDIVを右に、上のDIVを左に揃えています。私は最初のANDの隣に3番目の画像を取得するのが少し難しいです。

これはこれまでのコードです！

.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:right`することにより、コンテンツ

のよりよい経営管理論のためのすべての要素を、最初のfloat:left及び第三clear: right私はdiv Sを積み重ねするために管理し、あなたが探していました。

ベローはあなたのコードを使用している実例です。

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を1つ下に整列する

答えて

フロート第二と第三の要素float:rightすることにより、コンテンツ

関連する問題

フロート第二と第三の要素`float:right`することにより、コンテンツ