想不通什么是错的代码

Question

我试图做到这一点的设计...

但结果不出我所料，我不是真的清楚如何与柔性尝试此属性和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> 
 
\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

利用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/