Question

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

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

这就是我想要的：

三个盒子，每个盒子有三个部分：标题，描述和页脚，垂直排列
在桌面版中，这些内容将被排列，以便它们连续排列
在移动设备中，它们会被排列在列中，从而加宽，以便它们占用更多宽度
按钮以桌面（行）格式对齐（如表格的底行），但只是在移动（列）格式的说明下方

以下是导致问题的原因：

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

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

使用表格，Flexboxes比之前发生的任何事情都要好。但是这个解决方案正在使盒子占用更多的空间想。我想要三列或一列。
另一个小故障修复：我使用position：absolute作为最长的盒子，并且 position：相对于较短的。那是把盒子拿来的足够长，以便按钮在桌面模式下对齐，但位置：相对框具有与移动形式的描述重叠的按钮。（这似乎也是一个笨拙的解决方案：我必须始终知道并标记最长的盒子）

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

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

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

1 个答案: