无法弄清楚代码是什么问题

Question

我试图完成这个设计......

但结果不是我的预期，我不清楚如何使用flex属性和bootstrap尝试这个，但它们不是我的强项。请解释一下您的解决方案背后的步骤，或链接/视频到可以的网站。

.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>
	   <div>R</div>
	   <div>L</div>
	   <div>I</div>
	   <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>
	  </div>
     <div class="col-xs-4" id="rightColumn">
       <div>A</div>
       <div>M</div>
       <div>B</div>
	   <div>E</div>
	   <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>

关键因素是为height指定一个.flex-container > *值（如果不这样做，孩子们只会根据他们的内容进行堆叠，他们不会增长到填充高度亲本）。

旨在作为概念证明。

Answer 2

利用Bootstrap（头部包含Bootstrap，万一你忘记了）。

Bootstrap一开始看起来令人生畏，但入门非常简单。很多都是重复的代码，需要一点时间来记忆。就资源而言，我建议：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/