Question

给出这样的布局：

我有以下HTML / CSS设置。我需要让周围的div与中心图像的顶部和底部对齐，但它似乎并没有起作用。它在调整屏幕大小时也会中断，并在背景颜色发生变化时丢失主要的周围div。

HTML

    <div class="col-lg-12 contact">
  <div class="col-md-4">
    <div class="lib-panel">
      <h4>Let's get to work</h4>
      <p>Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.</p>
      <div class="btn btn-default">Button</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="lib-panel">
      <div class="right-arrow"></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="lib-panel">
      <h4>Questions?</h4>
      <p>Lorem ipsum dolorset amicum</p>
      <div class="btn btn-default">Button</div>
      <div class="btn btn-default">Button</div>
    </div>
  </div>
</div>

CSS

.right-arrow {
  display: inline-block;
  position: relative;
  background-image: url("http://placehold.it/300x250");
  padding: 15px;
  height: 240px;
  width: 300px;
  margin-bottom: -25px;
  margin-top: -10px;
}

.right-arrow:after {
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #dde1e2;
}

.contact {
  background-color: #19223c;
}

.contact p,
h4 {
  color: $white;
}

JSFIDDLE：https://jsfiddle.net/kh0prtc4/6/

Answer 1

如果您希望在较小的屏幕上更大或更小，您应该使用行和容器类，您可以添加col-sm-4 col-xs-12类或其他类。如果您希望容器没有顶部和底部填充，只需添加

.contact .container{
  padding-top: 0;
  padding-bottom: 0;
}

你的HTML：

<div class="contact">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="lib-panel">
          <h4>Let's get to work</h4>
          <p>Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.</p>
          <div class="btn btn-default">Button</div>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="lib-panel">
          <div class="right-arrow"></div>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="lib-panel">
          <h4>Questions?</h4>
          <p>Lorem ipsum dolorset amicum</p>
          <div class="btn btn-default">Button</div>
          <div class="btn btn-default">Button</div>
        </div>
      </div>
    </div>
   </div>
</div>

这是一个小提琴Fiddle

Answer 2

想出解决方案只是一个保证金问题。我需要添加

margin-bottom: -25px;
margin-top: -10px;

到.right-arrow类，以使其与容器匹配。

3列布局

2 个答案: