Question

所以，我正在尝试制作一些可以容纳一些文字的盒子，也许还有一些img的底座，但是盒子不会像小屏幕那样对齐。

我尝试了一些东西，但是文字在没有破坏对齐的情况下不会在按钮上对齐

CSS：

.bigbox {
 text-align: center;
  padding: 80px 40px;
}
.bigbox .bigbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}

.bigbox .bigbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}
.smallbox {
 text-align: center;
  padding: 80px 40px;
}
.smallbox.smallbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}
.smallbox.smallbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}

HTML

  <div class="full-width-container">
        <div class="row no-space-row ">
            <div class="col-sm-6 bg-color-base">
                <div class="bigbox ">
                    <h2 class="bigbox-title">BOX 1</h2>
                    <p class="bigbox-text">DESCRIPTION</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="smallbox bg-color-purple ">
                    <h2 class="smallbox-title">BOX 1</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>
                 <div class="smallbox bg-color-purple-dark ">
                    <h2 class="smallbox-title">BOX 1</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>  
            </div>
        </div>
    </div>

Answer 1

你走了。文本必须位于绝对定位的div中。

http://codepen.io/ruchiccio/pen/Kzbeqa

.bcenter {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  text-align:center;
}

Answer 2

其中的关键是父div上的display:flex。这迫使两个孩子div的高度相同。

我已从第二个div中移除了填充以将其移近大框，然后position:absolute将div d大框标题移到.row { display:flex; } .bg-color-base { background:red; } .bg-color-base + div{ padding:0; } .bg-color-purple { background:purple; } .bg-color-purple-dark { background:blue; } .bigbox { text-align: center; padding: 40px; position:absolute; bottom:0; } .bigbox .bigbox-title { align-self: flex-end; text-align: left; font-size: 28px; color: #fff; } .bigbox .bigbox-text { text-align: left; font-size: 18px; color: #fff; opacity: .85; margin-bottom: 20px; } .smallbox { text-align: center; padding: 160px 40px 10px; } .smallbox.smallbox-title { text-align: left; font-size: 28px; color: #fff; } .smallbox.smallbox-text { text-align: left; font-size: 18px; color: #fff; opacity: .85; margin-bottom: 20px; }的底部。

我还使用了填充物来帮助设计样式 - 但是它的风格看起来就像上面的图像一样。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="full-width-container">
        <div class="row no-space-row ">
            <div class="col-xs-6 bg-color-base">
                <div class="bigbox ">
                    <h2 class="bigbox-title">BOX 1</h2>
                    <p class="bigbox-text">DESCRIPTION</p>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="smallbox bg-color-purple ">
                    <h2 class="smallbox-title">BOX 2</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>
                 <div class="smallbox bg-color-purple-dark ">
                    <h2 class="smallbox-title">BOX 3</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>  
            </div>
        </div>
    </div>

＆＃13;

{{1}}

＆＃13;

使用行和列boostrap

2 个答案: