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％高度设置为图像。例如 - 我在代码中添加了一个虚拟图像，你可以看到它。

全高图像

2 个答案: