3つのdivを斜めに表示するにはどうすればよいですか？

Question

私はできる限りこれを説明しようとします。私は2つの部門を横に並べています。右のものには3つの段落があります。左の画像には画像、縦書きのテキスト、第2の画像があります。最初の画像は左上隅に、縦のテキストは水平に、垂直に、2番目の画像は右下隅に置く必要があります。

body { 
 
    width: 8.5in; 
 
} 
 

 
.left-div { 
 
    float: left; 
 
    background: blue; 
 
} 
 

 
.right-div { 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 

 
.left-img { 
 
    float: left; 
 
} 
 

 
.big-text { 
 
    background: orange; 
 
    font-size: 2em; 
 
    padding: 0 30px; 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
.right-img { 
 
    float: left; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 

 
.bottom-div { 
 
    background: gray; 
 
}

<div class="left-div"> 
 
    <div class="left-img"> 
 
    <img src="smiley.gif" width="150"> 
 
    </div> 
 
    <div class="big-text"> 
 
    <p>B<br>I<br>G</p> 
 
    </div> 
 
    <div class="right-img"> 
 
    <img src="smiley.gif" height="200"> 
 
    </div> 
 
    <div class="right-div"> 
 
    <p>First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First 
 
     paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph. 
 
     <p>Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. 
 
     Second paragraph. 
 
     <p>Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third 
 
      paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. 
 
    </div> 
 
</div> 
 
<div class="bottom-div"> 
 
    <p>Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph 
 
    of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. 
 
</div>

Answer 1

あなたは、コンテナの中に左と右のdivをラップし、ネストされたフレキシボックスのレイアウトを使用することができます。

CodePen

body { 
 
    width: 8.5in; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding-bottom: 20px; 
 
} 
 

 
img { 
 
    vertical-align: top; 
 
} 
 

 
.container { 
 
    display: flex; 
 
} 
 

 
.left-div { 
 
    background: blue; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.right-div { 
 
    background: red; 
 
} 
 

 
.left-img { 
 
    align-self: flex-start; 
 
} 
 

 
.big-text { 
 
    background: orange; 
 
    font-size: 2em; 
 
    padding: 0 30px; 
 
} 
 

 
.right-img { 
 
    align-self: flex-end; 
 
} 
 

 
.bottom-div { 
 
    background: gray; 
 
}

<div class="container"> 
 
    <div class="left-div"> 
 
    <div class="left-img"> 
 
     <img src="//dummyimage.com/150x150" width="150"> 
 
    </div> 
 
    <div class="big-text"> 
 
     <P>B<br>I<br>G</p> 
 
    </div> 
 
    <div class="right-img"> 
 
     <img src="//dummyimage.com/100x200" height="200"> 
 
    </div> 
 
    </div> 
 
    <div class="right-div"> 
 
    <p>First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First 
 
     paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.</p> 
 
    <p>Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. 
 
     Second paragraph.</p> 
 
    <p>Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. 
 
     Third paragraph. Third paragraph. Third paragraph. Third paragraph. </p> 
 
    </div> 
 
</div> 
 
<div class="bottom-div"> 
 
    <p>Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph 
 
    of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p> 
 
</div>

Answer 2

あなたはこのような何かをしたいですか？

.container{ 
 
    margin: auto; 
 
    outline: 2px solid green; 
 
    width: 70%; 
 
    height: 300px; 
 
} 
 
span{ 
 
    float:right; 
 
    font-size: 28px; 
 
} 
 
.div1, .div2, .div3{ 
 
    text-align:center; 
 
    vertical-align: middle; 
 
    line-height: 100px; 
 
    width: 33.33%; 
 
    height: 100px; 
 
    color: white; 
 
} 
 
.div1{ 
 
    background-color: blue; 
 
} 
 
.div2{ 
 
    margin-left: 33.2%; 
 
    background-color: grey; 
 
} 
 
.div3{ 
 
    margin-left: 66.5%;; 
 
    background-color: red; 
 
}

<div class="container"><span>I'm main DIV</span> 
 
    <div class ="div1">hi, i'm first div </div> 
 
    <div class ="div2">hi, i'm second div </div> 
 
    <div class ="div3"> hi, i'm third div</div> 
 
</div>