Question

我正在建立一个网站，而客户对他的需求非常具体。

在其中一节中，他让我要放三列。前两列必须是带有相应文本的标题，第三列必须是图像。因此，对我而言，唯一的挑战是让第三列适应其他两列的高度。但经过一些研究和使用flexbox，我完成了它。

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

注意图像如何从字幕开始处开始。所以实际的问题是：如何放置标题＆＃34;购买＆＃34;和＆＃34;销售＆＃34;居中并在每列之上？

以下是当我认为图片从标题开始处开始时使用的代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

非常感谢你的帮助！

Answer 1

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

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

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

鉴于他听起来像是一个“具有挑战性”的客户，你还可以更好地预测/检查它在崩溃时的样子：（

Answer 2

我找到了答案，我将在此发布，以防将来有人遇到同样的问题。

你必须给main一个100px的填充（或者你的设计需要多少），你必须给你的h2以下样式：

.buy_sell_text h2{
  text-align: center;
  margin-top: -50px;
 }`

这样标题看起来会留下它们的列，仍然会有填充顶部和填充底部，并且使用flexbox图像将适应另外两列的文本高度。

#buy_sell main>div{
  display: flex;
}

.buy_sell_text, .buy_sell_photoColumn{
  flex: 1;
}

我希望这对你们任何人都有用。最好的问候，

Bootstrap - 一行中有3列，行外的标题

2 个答案: