html - Bootstrap - 一行 3 列，标题在行外

Question

我正在制作一个网站，客户对他想要的方式非常具体。

在其中一个部分中，他要求我放置三列。前两列必须是带有相应文本的标题，第三列必须是图像。所以这里对我来说唯一的挑战是让第三列的高度适应其他两列。但经过一些研究和使用 flexbox 我完成了它。

但是，当我向客户展示它时，他说他希望图像只适应文本而不是整个栏目。他希望其他两列的标题在外面。由于我不知道我是否说清楚了，这是他想要的图片:

注意图像是如何从字幕开始的地方开始的。所以实际的问题是:如何将标题“买入”和“卖出”居中放置在每列上方？

这是我认为图像从标题开始的地方开始使用的代码:

#buy_sell main{
  padding: 50px 100px;
}

.buy_sell_photoColumn{
  background: url('../img/buy_sell_photo.jpg') center center no-repeat;
  background-size: cover;
}

.buy_sell_text h2{
  text-align: center;
  color: #0bbacf;
  margin-bottom: 20px;
}

.buy_sell_text h3{
  text-align: center;
  color: #43727c;
  font-size: 20px;
  font-family: 'AvenirNext-Regular';
}

#buy_sell .buy_sell_text p{
    color: #43727c;
    font-size: 16px;
    font-family: 'AvenirNext-Regular';
    margin-bottom: 20px;
}

.buy_sell_text p:nth-of-type(4){
  margin-bottom: 0 !important;
}

#buy_sell .buy_sell_text ul{
  color: #43727c;
    font-size: 16px;
    font-family: 'AvenirNext-Regular';
    margin-bottom: 20px;
}

#buy_sell main>div{
  display: flex;
}

.buy_sell_text, .buy_sell_photoColumn{
  flex: 1;
}

.buy_sell_text ul{
  padding: 0;
}

#buy_sell .buy_sell_text ul{
  color: #43727c;
    font-size: 16px;
    font-family: 'AvenirNext-Regular';
    margin-bottom: 20px;
    list-style: none;

   text-indent: 2px;
   list-style-position: outside;
}

#buy_sell .sellProperty p{
  margin-bottom: 10px;
}

#buy_sell .sellProperty li{
  margin: 5px 40px;
}

#buy_sell .sellProperty li:before{
  position: absolute;
  left: 50px;
  content:"\25B6";
  font-family: fontAwesome;
  color: #00b6d0;
  font-size: 14px;
}

<main class="container-fluid">
        <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-0 col-lg-4 col-lg-offset-0 buy_sell_text textWrapper">
                    <h2>BUY</h2>
                    <h3>subtitle here</h3>
                    <p>lorem ipsum</p>

                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et do.</p>

                    <p> et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in volupta</p>
                </div>

                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-0 col-lg-4 col-lg-offset-0 buy_sell_text sellProperty textWrapper">
                    <h2>SELL</h2>
                    <h3>subtitle here!</h3>
                    <p>here is what I offer:</p>

                    <ul>
                        <li>
                            lorem ipsum
                        </li>

                        <li>
                            lorem ipsum
                        </li>

                        <li>
                            lorem ipsum
                        </li>

                        <li>
                            Lorem ipsum
                        </li>
                    </ul>
                </div> 

                <div class="col-xs-12 col-xs-offset-0 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-0 buy_sell_photoColumn">
                </div>
        </div>
    </main>

非常感谢您的帮助!

Answer 1

这不是最优雅的方法，但您可以简单地在上面的新行中创建一组匹配的列，并将标题放入其中。

即。复制整行。然后在第一个副本中删除除标题之外的所有内容......容易想到，很难解释哈哈

或者给标题本身一个固定的高度，并使用与图像列上的填充相同的高度。

鉴于他听起来像是一个“有挑战性的”客户，你最好也能预测/检查一下他希望它在崩溃时的样子:(