は、私は、この設計を実現しようとした

Question

コードでいただきました！間違っを把握することはできません...

が、結果は私が期待したものではありません属性とブートストラップが、私の強みではありません。あなたの解決策の背後にあるステップやできるサイトへのリンク/ビデオを説明してください。

.Charlie{ 
 
border: solid 1px #333; 
 
text-align:center; 
 
display: flex; 
 
height: 786px; 
 
width: 550px; 
 
margin-left: 100px; 
 
margin-right: 100px; 
 
margin-top: 30px; 
 
} 
 

 
#leftColumn { 
 
    border-right: solid 1px #333; 
 
    padding:0 
 
} 
 

 
#rightColumn { 
 
    border-left: solid 1px #333; 
 
    padding:0; 
 
    margin-top: 250px; 
 

 
} 
 

 

 
#leftColumn div, 
 
#rightColumn div{ 
 
    border-bottom: solid 1px #333; 
 
    line-height:3em 
 
} 
 

 
#leftColumn div:last-of-type, 
 
#rightColumn div:last-of-type { 
 
border-bottom-width: 0 
 
} 
 

 
#middleColumn { 
 
line-height: 9em; 
 
width: 550px; 
 
}

<div class="Charlie clearfix"> 
 
     <div class="col-xs-4" id="leftColumn"> 
 
     <div>C</div> 
 
     <div>H</div> 
 
     <div>A</div> 
 
\t <div>R</div> 
 
\t <div>L</div> 
 
\t <div>I</div> 
 
\t <div>E</div> 
 
    </div> 
 
    <div class="col-xs-4" id="middleColumn"> 
 
     <img class="amber" id="charlie" src="https://s-media-cache-ak0.pinimg.com/originals/6f/90/17/6f901708bf30f8a04bc04ce143fadade.jpg" height="786" width="550" > 
 
     <a href="#" id="view3"> Veiw Collection</a> 
 
\t </div> 
 
    <div class="col-xs-4" id="rightColumn"> 
 
     <div>A</div> 
 
     <div>M</div> 
 
     <div>B</div> 
 
\t <div>E</div> 
 
\t <div>R</div> 
 
     </div> 
 
    </div>

Answer 1

ここで私はそれを行うだろう方法は次のとおりです。

.flex-container { 
 
    display: flex; 
 
    border: 1px solid; 
 
    border-width: 1px 1px 0 0; 
 
} 
 
.flex-container > * { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    height: calc(100vh - 1px); 
 
} 
 
.flex-container > * > * { 
 
    border: 1px solid; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex: 1; 
 
    margin: -1px -1px 0 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body {margin: 0;} 
 
.backgroundColumn { 
 
    background: url(https://source.unsplash.com/random/400x800) no-repeat 50% 50% /cover; 
 
} 
 

 
/* rest is just styling. ignore. */ 
 

 
.flex-container { 
 
    background-color: #424242; 
 
    color: white; 
 
} 
 
.flex-container, .flex-container * { 
 
    border-color: rgba(255,255,255,.07); 
 
}

<div class="flex-container"> 
 
    <div> 
 
    <div> text</div> 
 
    <div> text</div> 
 
    <div> text</div> 
 
    </div> 
 
    <div> 
 
    <div class="backgroundColumn"></div> 
 
    </div> 
 
    <div> 
 
    <div> text</div> 
 
    <div> text</div> 
 
    <div> text</div> 
 
    </div> 
 
</div>

キー成分は、あなたがドン場合」（.flex-container > *ためheight値を指定することですt、子供たちはちょうど彼らの内容に応じて積み重なります、彼らはうわー親の身長を満たさないように成長する）。

概念証明として意図されています。

Answer 2

ブートストラップを利用する（忘れた場合は、頭にブートストラップが含まれています）。

最初はブートストラップが気になるようですが、始めるのはかなり簡単です。その多くは反復コードであり、暗記するのに時間がかかります。限りリソースが行くように、私はお勧めします：https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row row-eq-height"> 
 
     <div class="col-sm-3"> 
 
      <div class="row"> 
 
        <div class="col-sm-12"><img src="http://via.placeholder.com/350x150" /></div> 
 
        <div class="col-sm-12"><img src="http://via.placeholder.com/350x150" /></div> 
 
        <div class="col-sm-12"><img src="http://via.placeholder.com/350x150" /></div> 
 
       </div> 
 
     </div> 
 
     <div class="col-sm-6"><img src="http://via.placeholder.com/350x150" /></div> 
 
     <div class="col-sm-3"> 
 
       <div class="row"> 
 
        <div class="col-sm-12"><img src="http://via.placeholder.com/350x150" /></div> 
 
        <div class="col-sm-12"><img src="http://via.placeholder.com/350x150" /></div> 
 
        <div class="col-sm-12"><img src="http://via.placeholder.com/350x150" /></div> 
 
       </div> 
 
     </div> 
 
    </div> 
 
</div>

JSFiddle：https://jsfiddle.net/Jabideau/L1tqtqr7/