Question

我目前正在建设一个网站和我并排图像和文本运行到一些问题的一面：

<div class='banner' style='background-color: #efefef'> 
    <div class='container-fluid'> 

    <div class="row-fluid"> 

     <div class='col-sm-8'> 
     <div class='inner'> 
      <div class='title'>Travel Bezaff</div> 
      <div class='subtitle'>Like nothing you've ever experienced</div> 
      <div class="paragraph" style="text-align: center"> 
      From the bustling streets of Casablanca to the dynamic capital city of Rabat to the labryinth like medina of the old city of Fez, prepare yourself for a journey into one of the most culturally diverse regions. 
      </div> 
     </div> 
     </div> 

     <div class='col-sm-4'></div> 
    </div> 

    </div> 
</div> 

我有两列在一排，一个是内容一个用于位于页面右侧的图像。如您所见，内容已位于容器的左侧。

我只是想知道如何使两列等高。图像应该完全填充较大屏幕尺寸的高度，但如果两个列在折叠到较小屏幕尺寸时彼此堆叠在一起，这当然是可以接受的。我该如何解决这个问题？

Answer 1

好的，所以我提供了几种不同的方法，你可以做到这一点（取决于你实际寻找的方式，因为上面的屏幕截图不是很清楚）。

这里是展示如何可以，如果你想你的形象，以保持合适的宽高比来完成一个的jsfiddle：

http://jsbin.com/xedijomuce/1/edit?css,output

而这里的展示，如果你想你的形象怎么可以完成此另一个的jsfiddle一直延伸到显示器的整个高度：

http://jsbin.com/nozagunoxo/1/edit?css,output

基本上，它使用flex财产，以保证两列总是相同的大小。然后我使用align-items: center垂直对齐它们，所以无论窗口有多高，文本总是居中。

.row-fluid { 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
} 

我将很快提供使用display: table-cell最后一个例子，如果你希望避免flex-box。

编辑：按照承诺，这里是一种使用display: table-cell完成类似效果的方法。这是最受支持的解决方案，但需要多一点工作。祝你好运，让我知道如果您有任何疑问：

http://jsbin.com/mifupiwexi/1/edit?css,output

Answer 2

以下是该解决方案，如果有任何问题，请随时问： -

我更新了你的代码一点： -

<div class = 'banner' style = 'background-color: #efefef'> 
      <div class = 'container-fluid'> 

       <div class = "row-fluid"> 

        <div class = 'col-sm-8' style="height:100px;"> 
         <div class = 'inner'> 
          <div class = 'title'>Travel Bezaff</div> 
          <div class = 'subtitle'>Like nothing you've ever experienced</div> 
          <div class = "paragraph" style = "text-align: center"> 
           From the bustling streets of Casablanca to the dynamic capital city of Rabat to the labryinth like medina of the old city of Fez, prepare yourself for a journey into one of the most culturally diverse regions. 
          </div> 
         </div> 
        </div> 

        <div class = 'col-sm-4' style="height:100px;"> 
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="height:100%;"> 
</div> 
       </div> 

      </div> 
     </div> 

你只需要把某些特定高度两列，并设置100％的高度图像。例如，我在代码中添加了一个虚拟图像，您可以看到。