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

Question

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

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

这是我想要的:

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

这是导致问题的原因:

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

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

• Flexboxes 比以前发生的任何事情都要好，有表格。但是这个解决方案使盒子占用了多少空间想。我想要三列或一列。
• 另一个小问题修复:我使用 position: absolute 来表示最长的框，并且position:相对于较短的。这就是让箱子到足够长，以便按钮在桌面模式下对齐，但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>