进行响应时，如何使卡片中的列表与另一张卡片中的列表保持一致？

分类：编程问答

如何解决进行响应时，如何使卡片中的列表与另一张卡片中的列表保持一致？

我有 3 张卡片，上面有一些标题，然后是一个列表和一个按钮。我试图让他们做出反应，但我无法保持一切完全一致。因为列表的大小不同，文本量也不同，所以最终会变得不均匀，我希望它们对齐。我试过 flexBox，但似乎无法让它工作。我发现自己不得不摆弄边距，这似乎不太实用。

    main class="grid-parent">
<section class="grid-container">
    <header class="grid-header">
        <h1 class="title__head">Step 1</h1>
        <h1>Our Services</h1>
        <p>Every journey begins with a single step.  Let us make your move as easy as possible!</p>
    </header>
        <article class="grid1-basic">
            <!-- <section class="grid1-basic__flex"> -->
                <h1 class="package-title">Basic Package</h1>
                <h2 class="prices">$199</h2>
                <h3 class="list-title">Prepare your Move from Home!</h3>
                    <ul class="lists1">
                        <li><i class="fas fa-angle-right"></i>
                            1.5-Hour Online Skype Consultation
                        </li>
    
                        <li><i class="fas fa-angle-right"></i>
                            Plans/Advice Tailored Exclusively for You
                        </li>

                        <li>
                            <i class="fas fa-angle-right"></i>
                            Unlimited Questions via Email
                        </li>
                        
                    </ul>
                    <a class="button" href="choosecity.html">Choose Plan</a>
            <!-- </section> -->
        </article>

        <article class="grid2-plus">
            <!-- <section class="grid2-plus__flex"> -->
                <h1 class="package-title">Plus Package</h1>
                <h2 class="prices">$699</h2>
                <h3 class="list-title">Come meet us!</h3>
                    <ul class="lists2">
                        <li><i class="fas fa-angle-right"></i>
                            <span>Everything in the <u>Basic</u> Package</span>
                        </li>

                        <li>
                            <i class="fas fa-angle-right"></i>
                            3-Hour In-Person Consultation
                        </li>
            
                        <li><i class="fas fa-angle-right"></i>
                            Unlimited Questions via Email or Skype Calls
                        </li>

                        <li><i class="fas fa-angle-right"></i>
                            Guided Tour of the City
                        </li>
                    </ul>
                    <a class="button" href="choosecity.html">Choose Plan</a>
            <!-- </section> -->
        </article>
    
        
        <article class="grid3-premium">
            <!-- <section class="grid3-premium__flex"> -->
                <h1 class="package-title">Premium Package</h1>
                <h2 class="prices">$1200</h2>
                <h3 class="list-title">Housing Included!</h3>
                    <ul class="lists3">
                        <li><i class="fas fa-angle-right"></i>
                            <span>Everything in the <u>Plus</u> Package</span>
                        </li>

                        <li><i class="fas fa-angle-right"></i>
                            Grocery Tour
                        </li>

                        <li><i class="fas fa-angle-right"></i>
                            We Will Find You an Affordable Apartment via our Contacts!
                        </li>
                    </ul>
                    <a class="button" href="choosecity.html">Choose Plan</a> 
            <!-- </section> -->
        </article>
            
</main>
</div>

    .grid-parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.grid-container {
    display: grid;
    row-gap: 4rem;
    column-gap: 7rem;
    /* grid-template-columns: 3fr 3fr 3fr;  */
    /* grid-template-rows: 2rem 5rem;  */
    grid-template-areas: "header header header"
                         "plan1 plan2 plan3";
                          
    margin-bottom: 10rem;
    text-align: center;
    
}

.grid-header {
    grid-area: header;
        margin-top: 2.5%;
        margin-left: 12.25%;
        text-align: center;
        border: 2px solid black;
        width: 75%;
        background: var(--main-color);
        color: white;
        font-family: 'Roboto',sans-serif;
        font-size: larger;
        margin-right: 5rem;
        Box-shadow: rgb(36,36,36) 10px 10px 10px;
}
.title__head {
    width: 100%;
    margin-top: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    background: white;
    color: var(--main-color);
    font-family: 'Roboto',sans-serif;
}

.package-title {
    width: 100%;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    background: var(--main-color);
    font-family: 'Roboto',sans-serif;
    font-size: 1.5rem;
}

.prices {
    color: white;
    background: var(--main-color);
    padding: 16px 24px;
    width: 50%;
    margin-left: 25%;
    margin-top: 10%;
    Box-shadow: rgb(43,42,42) 4px 4px 4px;
}

.grid1-basic {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    grid-area: plan1;
    width: 27rem;
    height: 37rem;
    background-color:  rgb(255,241,227);
    font-family: 'Roboto',sans-serif;
    border: solid 2px black;
    color: white;
    Box-shadow: rgb(43,42) 8px 8px 8px;
    /* background:linear-gradient( rgba(255,236,0.60),rgba(255,0.60)),url("img/Lajas.jpg");
    background-position: center right 27%; */
}


.grid2-plus {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    grid-area: plan2;
    width: 27rem;
    height: 37rem;
    color:  var(--main-color);
    font-family: 'Roboto',sans-serif;
    border: 2px solid black;
    background: rgb(255,227);
    Box-shadow: rgb(43,42) 8px 8px 8px;
    /* background:linear-gradient( rgba(0,17,223,rgba(0,url("img/tatacoa.jpg");
    background-position: center right 27%;  */
}


.grid3-premium {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    grid-area: plan3;
    width: 27rem;
    height: 37rem;
    color:  var(--main-color);
    font-family: 'Roboto',sans-serif;
    border: 2px solid black;
    background:  rgb(255,8,url("img/cocora.jpg");
    background-position: center right 27%;
    background-size: cover; */
}

.list-title {
    font-size: 1.75rem;
    color: white;
    background: var(--main-color);
    margin-bottom: 0rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.lists1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 14.7rem;
    list-style: none;
    padding-inline-start: 0;
    font-size: 1.25rem;
}

.lists1 li {
/*?    flex-shrink: 1;?*/
    font-weight: bolder;
    margin: 1rem 0;
    color: rgb(107,107,107);
    background-color: white;
}


.lists2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 14.7rem;
    list-style: none;
    padding-inline-start: 0;
    font-size: 1.25rem;
}
.lists2 span,.lists3 span {
    color: rgb(0,204,0);
}
span i {
    color: rgb(0,0);
}
i {
    color: var(--main-color);
}

.lists2 li {
    font-weight: bolder;
    margin: 1rem 0;
    color: rgb(107,107);
    background-color: white;
}
.lists3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 14.7rem;
    list-style: none;
    padding-inline-start: 0;
    font-size: 1.25rem;
}

.lists3 li {
    font-weight: bolder;
    margin: 1rem 0;
    color: rgb(107,107);
    background-color: white;
}

.button  {
    padding: 20px 52px;
    color:white;
    background-color: var(--main-color);
    font-size: 1.5rem;
    font-weight: 800;
    font-family: inherit;
    text-decoration: none;
}

.button:hover,.button:focus,.button:active {
    padding: 20px 24px;
    color: rgb(110,110,110);
    opacity: .7;
    transition: .45s .08s;
    font-size: 1.25rem;
    font-family: inherit;
    cursor: pointer;
    
}
.button:focus {
    outline: var(--main-color);
}

@media screen and (max-width:1600px) {
    .grid-header {
        
        width: 100%;
        margin: 2rem 0rem 0rem;
        display: inline-block;
    }
    
    .grid-container {
        column-gap: 3.5rem;
    }
    .grid1-basic {
        
        width: 20rem;
        height: 40rem;
    }
    .grid2-plus {
        width: 20rem;
        height: 40rem;
    }
    .grid3-premium {
        width: 20rem;
        height: 40rem;
    }

    .lists1 li {
        margin: 1.4rem 0;
        font-weight: bolder;
        color: rgb(107,107);
        background-color: white;
    }
    
    .list-title {
        font-size: 1.25rem;
        color: white;
        background: var(--main-color);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .lists1 {
        list-style: none;
        padding-inline-start: 0;
        margin-bottom: 19%;
        
    }
    
    .lists2 {
        list-style: none;
        padding-inline-start: 0;
        margin-bottom: 19%;
        
    }
    .lists2 span,.lists3 span {
        color: rgb(0,0);
    }
    span i {
        color: rgb(0,0);
    }
    i {
        color: var(--main-color);
    }
    
    .lists2 li {
        font-weight: bolder;
        color: rgb(107,107);
        background-color: white;
    }
    
    .lists3 {
        list-style: none;
        padding-inline-start: 0;
        margin-bottom: 19%;
        font-size: 1.25rem;
    }
    
    .lists3 li {
        font-weight: bolder;
        color: rgb(107,107);
        background-color: white;
        margin-bottom: 14.5%;
    }
}
    @media screen and (max-width:1366px) {
        .grid-header {
            width: 100%;
            margin: 2rem 0rem 0rem;
            display: inline-block;
            
        }
        
        .grid-container {
            column-gap: 3.5rem;
        }
        .grid1-basic {
            width: 20rem;
            height: 40rem;
        }
        .grid2-plus {
            width: 20rem;
            height: 40rem;
        }
        .grid3-premium {
            width: 20rem;
            height: 40rem;
        }
        .list-title {
            font-size: 1.25rem;
        }

        
        .lists3 li {
            margin-bottom: 2.857rem;
        }
        }
@media screen and (max-width:1200px) {
    .grid-header {
        font-size: .9rem;
        width: 100%;
        margin: 2rem 0rem 0rem;
        display: inline-block;
        
    }
    
    .grid-container {
        column-gap: 3.5rem;
    }
    .grid1-basic {
        width: 17rem;
        height: 37rem;
    }
    .grid2-plus {
        width: 17rem;
        height: 37rem;
    }
    .grid3-premium {
        width: 17rem;
        height: 37rem;
    }
    .list-title {
        font-size: 1.1rem;
    }
    

    .lists1 li {
        
        font-size: 1.15rem;
    }
    .lists2 li {
        font-size: 1.15rem;
    }
    .lists3 li {
        font-size: 1.15rem;
    
    }
  }
  @media only screen 
  and (min-width: 1024px) 
  and (max-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
   
    .nav_lists a {
        font-size: 1rem;
      }
     
      .grid-header {
        display: inline-block;
        margin: 2rem 0rem 0rem;
        border: 2px solid black;
        width: 120%;
        font-size: 1rem;
        
      }
      .title__head {
        width: 100%;
        margin-top: 0;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .grid-container {
        grid-template-areas: "header"
                                "plan1"
                                "plan2"
                                "plan3";
        justify-items: center;
        text-align: center;
        margin-bottom: 8rem;
    }
    
    .package-title {
        width: 100%;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        color: white;
        background: var(--main-color);
        font-family: 'Roboto',sans-serif;
        font-size: 1.75rem;
    }
    
    .list-title {
        font-size: 1.75rem;
    }
    .prices {
        padding: 16px 24px;
        width: 50%;
        margin-left: 25%;
        margin-top: 2rem;
        Box-shadow: rgb(43,42) 4px 4px 4px;
        font-size: 1.75rem;
    }
    
    .grid1-basic {
        margin: 0;
        text-align: center;
        grid-area: plan1;
        width: 28rem;
        height: 38rem;
        background-color:  rgb(255,227);
        font-family: 'Roboto',sans-serif;
        border: solid 2px black;
        color: white;
        Box-shadow: rgb(43,42) 8px 8px 8px;
    }
    
    .grid2-plus {
        margin: 0;
        text-align: center;
        grid-area: plan2;
        width: 28rem;
        height: 38rem;
        color:  var(--main-color);
        font-family: 'Roboto',sans-serif;
        border: 2px solid black;
        background: rgb(255,227);
        Box-shadow: rgb(43,42) 8px 8px 8px;
    }
    
    
    .grid3-premium {
        margin: 0;
        text-align: center;
        grid-area: plan3;
        width: 28rem;
        height: 38rem;
        color:  var(--main-color);
        font-family: 'Roboto',sans-serif;
        border: 2px solid black;
        background:  rgb(255,42) 8px 8px 8px;
    }
    
    .lists1 {
        list-style: none;
        padding-inline-start: 0;
        margin-bottom: 3rem;
        font-size: 1.25rem;
        
    }
    
    .lists1 li {
        font-weight: bolder;
        margin: 1.5rem 0;
        color: rgb(107,107);
        background-color: white;
        margin-bottom: 4rem;
    }
    
    .lists2 li {
        margin-bottom: 2rem;
    }
    .list-title {
        font-size: 1.25rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        color: white;
        background: var(--main-color);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .lists2 {
        list-style: none;
        padding-inline-start: 0;
        margin-bottom: 5rem;
        font-size: 1.25rem;
    }
    .lists2 span,107);
        background-color: white;
    }
    .lists3 {
        list-style: none;
        padding-inline-start: 0;
        font-size: 1.25rem;
        margin-bottom: 5.25rem;
        
    }
    
    .lists3 li {
        font-weight: bolder;
        margin: 1.5rem 0;
        color: rgb(107,107);
        background-color: white;
        margin-bottom: 2.8rem;
    }
    
    .button  {
        padding: 24px 42px;
        color:white;
        border-radius: 3px;
        background-color: var(--main-color);
        font-size: 1.25rem;
        font-weight: 800;
        font-family: inherit;
        margin-bottom: 3rem;
        text-decoration: none;
    }
    
    
    
    .button:hover,.button:active {
        padding: 16px 24px;
        color: rgb(110,110);
        opacity: .7;
        transition: .45s .08s;
        border-radius: 3px;
        font-size: 1.25rem;
        font-family: inherit;
        cursor: pointer;
        
    }
    .button:focus {
        outline: var(--main-color);
    }

    .addresses {
        padding-left: 0;
        display: -webkit-Box;
        display: -ms-flexBox;
        display: flex;
        -webkit-Box-orient: horizontal;
        -webkit-Box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

      }
  
  @media screen and (max-width:1023px) {
    .nav_lists a {
        font-size: 1rem;
      }
     
      .grid-header {
        display: inline-block;
        margin: 2rem 0rem 0rem;
        border: 2px solid black;
        width: 120%;
        font-size: 1rem;
        
      }
      .title__head {
        width: 100%;
        margin-top: 0;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .grid-container {
        grid-template-areas: "header"
                                "plan1"
                                "plan2"
                                "plan3";
        justify-items: center;
        text-align: center;
        margin-bottom: 8rem;
    }
    
    .package-title {
        width: 100%;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        color: white;
        background: var(--main-color);
        font-family: 'Roboto',107);
        background-color: white;
        margin-bottom: 2.8rem;
    }
    
    .button  {
        padding: 24px 42px;
        color:white;
        border-radius: 3px;
        background-color: var(--main-color);
        font-size: 1.25rem;
        font-weight: 800;
        font-family: inherit;
        margin-bottom: 3rem;
        text-decoration: none;
    }
    
    .button:hover,110);
        opacity: .7;
        transition: .45s .08s;
        border-radius: 3px;
        font-size: 1.25rem;
        font-family: inherit;
        cursor: pointer;
        
    }
    .button:focus {
        outline: var(--main-color);
    }

    .addresses {
        padding-left: 0;
        font-size: 1rem;
        display: -webkit-Box;
        display: -ms-flexBox;
        display: flex;
        -webkit-Box-orient: horizontal;
        -webkit-Box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .addresses__info1 {
        width: 15rem;
    }
    .addresses__info1 img {
        width: 36px;
        height: 36px;
    }
    .addresses__info2 {
        width: 15rem;
    }
    .terms_links a {
        font-size:1rem ;
    }
    .terms_footer {
        width: 15rem;
        margin-top: 4rem;
        margin-bottom: 1rem;
    }
}

  @media screen and (max-width:700px) {
    .nav_lists a {
        font-size: 1rem;
      }
      .grid-header {
        display: inline-block;
        margin: 2rem 0rem 0rem;
        border: 2px solid black;
        width: 90%;
        font-size: 1rem;
        
      }
      .title__head {
        width: 100%;
        margin-top: 0;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .grid-container {
        grid-template-areas: "header"
                                "plan1"
                                "plan2"
                                "plan3";
        justify-items: center;
        text-align: center;
    }
    
    .package-title {
        width: 100%;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        color: white;
        background: var(--main-color);
        font-family: 'Roboto',sans-serif;
        font-size: 1.5rem;
    }
    
    .prices {
        padding: 16px 24px;
        width: 50%;
        margin-left: 25%;
        margin-top: 2rem;
        Box-shadow: rgb(43,42) 4px 4px 4px;
        font-size: 1.25rem;
    }
    
    .grid1-basic {
        margin: 0;
        text-align: center;
        grid-area: plan1;
        width: 24rem;
        height: 34rem;
        background-color:  rgb(255,42) 8px 8px 8px;
    }
    
    .grid2-plus {
        margin: 0;
        text-align: center;
        grid-area: plan2;
        width: 24rem;
        height: 34rem;
        color:  var(--main-color);
        font-family: 'Roboto',42) 8px 8px 8px;
    }
    
    
    .grid3-premium {
        margin: 0;
        text-align: center;
        grid-area: plan3;
        width: 24rem;
        height: 34rem;
        color:  var(--main-color);
        font-family: 'Roboto',42) 8px 8px 8px;
    }
    
    .lists1 {
        list-style: none;
        padding-inline-start: 0;
        margin-bottom: 3rem;
        font-size: 1rem;
        
    }
    
    .lists1 li {
        font-weight: bolder;
        margin: 1.5rem 0;
        color: rgb(107,107);
        background-color: white;
        margin-bottom: 4rem;
    }
    
    .lists2 li {
        margin-bottom: 2rem;
    }
    .list-title {
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        color: white;
        background: var(--main-color);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .lists2 {
        list-style: none;
        padding-inline-start: 0;
        margin-bottom: 5rem;
        font-size: 1rem;
    }
    .lists2 span,107);
        background-color: white;
    }
    .lists3 {
        list-style: none;
        padding-inline-start: 0;
        font-size: 1rem;
        margin-bottom: 5.25rem;
        
    }
    
    .lists3 li {
        font-weight: bolder;
        margin: 1.5rem 0;
        color: rgb(107,107);
        background-color: white;
        margin-bottom: 2.8rem;
    }
    
    .button  {
        padding: 24px 42px;
        color:white;
        border-radius: 3px;
        background-color: var(--main-color);
        font-size: 1rem;
        font-weight: 800;
        font-family: inherit;
        margin-bottom: 3rem;
        text-decoration: none;
    }
    
    
    
    .button:hover,110);
        opacity: .7;
        transition: .45s .08s;
        border-radius: 3px;
        font-size: 1.25rem;
        font-family: inherit;
        cursor: pointer;
        
    }
    .button:focus {
        outline: var(--main-color);
    }
    .addresses {
        font-size: 1rem;
        align-items: center;
    }
    .addresses__info1 {
        width: 100%;
    }
    .addresses__info2 {
        width: 100%;
    }
    .terms_footer {
        width: 100%;
        margin-top: 2rem;
    }
    .terms_lists a {
        font-size: 1rem;
        
    }

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot