如何仅使用css在不同容器中对齐内容

Question

我正在尝试构建一个类似于下面显示的Pricing Table。

以下是我的要求

• Get Started按钮应位于同一水平面
• 无论内容如何，​​容器都必须具有相同的高度（两者中的点数和描述长度可以如图所示变化）
• 这两个容器应在低屏幕宽度上叠加一个

这是使用JS的当前解决方案的最小代码段

＆＃13;

＆＃13;

findTallest = function () {
  var tallestByGroupNum = {}
  $(".item-contents").each(
    function () {
      var grpNum = $(this).parent().attr('data-group-num');
      // !< instead of > to support undefined values
      if (!($(this).height() < tallestByGroupNum[grpNum] )) {
        tallestByGroupNum[grpNum] = $(this).height();
      }
    }
  );

  $(".item-box").height(
    function () {
      return tallestByGroupNum[$(this).attr('data-group-num')];
    }
  );
};

$(window).resize(findTallest);
findTallest();

＆＃13;

/* Put your css in here */

.item-box {
  border: 1px solid red;
}
.pricingCard {
  border: 2px solid red;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="col-xs-6 pricingCard">
    <h1>Free</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Long long long long long long long long long long long long long long long long long description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>

  <div class="col-xs-6 pricingCard">
    <h1>Premium</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Short description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

为了解释这个问题，这里是解释JS代码的片段。请注意，按钮不像以前那样正确对齐。

评论中建议的解决方案也与此类似。

＆＃13;

＆＃13;

/* Put your css in here */

.item-box {
  border: 1px solid red;
}
.pricingCard {
  border: 2px solid red;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="col-xs-6 pricingCard">
    <h1>Free</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Long long long long long long long long long long long long long long long long long description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>

  <div class="col-xs-6 pricingCard">
    <h1>Premium</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Short description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

再次强调这里的问题进行比较  

目前我正在使用javascript来实现这一目标。我检测到最高的元素，然后将父容器的高度设置为该值。

这里我目前提出的link to the plnkr是JS。

这可以单独在css中完成（使用一些引导类）。

Answer 1

使用flexbox，我可以这样做：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.pricing {
  background: #eee;
  display: flex;
  flex-direction: column;
  padding: 2em 0;
}
@media (min-width: 48em) {
  .pricing {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.pricing .block {
  display: flex;
  justify-content: center;
  flex: 1 1 50%;
}
@media (max-width: 48em) {
  .pricing .block {
    flex: 1;
  }
  .pricing .block:nth-child(odd) {
    order: -1;
  }
  .pricing .block:nth-child(2) {
    margin-top: 2em;
  }
}
.pricing header,
.pricing ul {
  background-color: white;
  box-shadow: 0 0 0 1px silver;
  padding: 1em;
  width: 80%;
}
.pricing header {
  display: flex;
  flex-direction: column;
}
.pricing button {
  margin-top: auto;
}

ul {
  margin: 0;
}
ul li {
  margin-left: 1em;
}

h1,
h2 {
  margin: 0.125em 0;
}

button {
  font: inherit;
}

＆＃13;

<div class="pricing">
  <div class="block">
    <header>
      <h1>Free</h1>
      <h2>0$</h2>
      <p>short description</p>
      <button>Get Started</button>
    </header>
  </div>
  <div class="block">
    <header>
      <h1>Premium</h1>
      <h2>5$</h2>
      <p>long description long description long description long description long description long description</p>
      <button>Get Started</button>
    </header>
  </div>
  <div class="block">
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
      <li>Point 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
      <li>Point 3</li>
      <li>Point 4</li>
      <li>Point 5</li>
      <li>Point 6</li>
      <li>Point 7</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在使用bootstrap的纯css中，实现此目的的唯一方法是使用这些元素的两种不同布局。在一个你将有你当前的HTML - 这将是较小的屏幕尺寸，在另一个，你将有一个布局，其中两个顶部div在row，两个底部div在{{1 }}。这将允许行保持相同的高度。然后，您使用媒体查询或隐藏的类，例如row相关的html。它不是很好，因为它需要重复代码，但它是一个纯粹的CSS解决方案。

我可以在这里找到一个示例jsfiddle - 它需要大量的样式工作，但你可以看到不同的元素如何使用bootstrap类以不同的宽度显示。

我还必须使用flex-box进行对齐项垂直拉伸