Question

我试图让两个相邻的div正确地相互交错，但失败了，因为它不适合。

<div class="container">
  <div class="row">
    <div>
      <div class="offer-horizontal">
        <div class="col-xs-12 col-sm-3 col-md-3" style="text-align:center;">
          <img src="https://icon.uiowa.edu/help/wp-content/uploads/2014/07/ICON_logo_only.png" alt="nothing" style="height:20px;width:50px;">
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that will wrap to multiple lines in small screens</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
      <div class="offer-horizontal">
        <div class="col-sm-3 col-md-3" style="text-align:center;">
          <img src="http://www.iconplc.com/icon-files/images/image-bank-component/other/icon-logo.jpg" style="height:20px;width:50px;">
        </div>
        <div class="col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that wil</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
      <div class="offer-horizontal">
        <div class="col-sm-3 col-md-3" style="text-align:center;">
          <img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Icons_logo_normal.jpg" alt="nothing" style="height:20px;width:50px;">
        </div>
        <div class="col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that will wrap to multiple lines in small screens</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

第一个组件：带黑色图标的div

第二个组件：带绿色图标的div（描述少）

第3个组件：带蓝色图标的div

图标和描述是一个组件，2个组件应该并排，具有相同的高度（在桌面和平板电脑中。在这个例子中我创建了两个组件并排，但由于第二个组件的高度问题与绿色icon的高度低于第三个组件，而不是低于第一个组件，低于第二个组件。

基本上我的问题是：如何使用绿色图标调整第二个组件，使第三个组件位于第一个组件的正下方

感谢任何帮助。

JSFiddle：

JSfiddle

Answer 1

我更新了你的JSFiddle。

更新：http://jsfiddle.net/okahara/hoekuw3v/1/

适用于中小型屏幕。我在html中重新组织了你的类，并在offer-horizontal添加了一个最小高度。

如果您有任何问题，请与我们联系。

Bootstrap css水平对齐元素不能正常工作

1 个答案: