底部带有粘性/响应按钮的响应框

Question

（第一次使用 Stack Overflow，如果我犯了任何严重的社交错误，请告诉我）

I've created a fiddle here of what I've been working on so farhttps://jsfiddle.net/95b18u9q/#&togetherjs=RmHEgrjOCG

这就是我想要的：

• 三个框，每个框包含三个部分：页眉、描述和页脚，垂直排列
• 在桌面版中，这些将排列成一排
• 在移动设备中，它们会被排列成列，加宽以占据更多宽度
• 按钮对齐在桌面（行）格式（如表格的底行），但在移动（列）格式的描述下方

以下是导致问题的原因：

• 第四个项目符号：我希望注册按钮以桌面格式（行）对齐。但是在移动格式（列）中，我希望它们缩小到项目描述下方（这就是为什么我不能手动调整行高；移动格式的列太长）
• 我会使用表格，但它没有响应式行 -> 列格式（或者会吗？我正在自学响应式设计，还在学习）
• 现在，较短的列的按钮覆盖了一些 移动形式的描述

我已经找到了一些修复方法，但它们会导致问题。

• Flexbox 比以前使用的表格更好。 但是这个解决方案使盒子占据了它们多少空间 想。我想要三列或一列。
• 另一个故障修复：我使用 position: absolute 表示最长的框，并且 位置：相对较短的。这就是让盒子 足够长，以便按钮在桌面模式下对齐，但 position: relative 框的按钮与移动形式的描述重叠。 （这似乎也是一个笨拙的解决方案：我必须始终知道并标记最长的盒子）

HTML

<div class="pricing-container">
    <div class="item-container" >
        <div class="item-header">Column 1</div>
        <div class="item-description">
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </div>
        <!-- The longest column needs position: relative. All others do not. -->
        <div class="item-footer" style="position: relative;">NewRegister</div>
    </div>


    <div class="item-container" >
        <div class="item-header">Column 2</div>
        <div class="item-description">
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </div>
        <div class="item-footer" style="">NewRegister</div>
    </div>

    <div class="item-container">            
        <div class="item-header">Column 3</div>
        <div class="item-description">
            <ul>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </div>
        <div class="item-footer" style="">NewRegister</div> 
    </div>
</div>

CSS：

.pricing-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
align-items:stretch;

}

.item-container {
  background: tomato;
  padding: 5px;
  width: 200px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
align-items:stretch;
position:relative;
align:row;
    width:33%
}

.item-header {
    background-color:gray;   
}
.item-description{
    width:90%;
}
.item-footer {
  background: pink;
  padding: 10px;
  width: 80%;
    margin-top:20px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom: 20px;
    color: white;
    font-weight: bold;
  font-size: 12px;
  text-align: center;
position: absolute;
bottom:0;
}
@media(min-width:787px) {
.item-container{
width:33%
}
}
@media(max-width:786px) {
.item-container{
width:100%
}
}

Answer 1

我认为这符合您想要的大部分条件。

Codepen Demo

.pricing-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}
.item-container {
  background: tomato;
  padding: 5px;
  flex: 1 0 200px;
  margin: 10px;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.item-header {
  background-color: gray;
}
.item-description {
  width: 90%;
  margin: auto;
  flex: 1;
}
ul {
  list-style-type: none;
  padding: 0;
}
.item-footer {
  background: pink;
  padding: 10px;
  width: 80%;
  margin: auto;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  align-self: flex-end;
}
@media screen and (max-width: 600px) {
  .pricing-container {
    flex-direction: column;
  }
  .item-container {
    flex: 0;
  }
  .item-description {
    flex: 0;
  }
  .item-footer {
    align-self: flex-start;
  }
}

<div class="pricing-container">
  <div class="item-container">
    <div class="item-header">Column 1</div>
    <div class="item-description">
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </div>
    <!-- The longest column needs position: relative. All others do not. -->
    <div class="item-footer" style="position: relative;">NewRegister</div>
  </div>
  <div class="item-container">
    <div class="item-header">Column 2</div>
    <div class="item-description">
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </div>
    <div class="item-footer" style="">NewRegister</div>
  </div>
  <div class="item-container">
    <div class="item-header">Column 3</div>
    <div class="item-description">
      <ul>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </div>
    <div class="item-footer" style="">NewRegister</div>
  </div>
</div>