html - 如何使用 CSS 使某个部分彼此完全对齐？

我正在尝试使用 css、html 和 javascript 以移动优先的方式从头开始重新创建此图形。这是原文:

这是我的版本

我卡住的部分是在移动设备和 1024 像素尺寸上完美对齐关键规范。但我没有任何运气。我正在使用 flexbox，我正在考虑使用方向作为一种方式，但我不知道我应该在哪里放置容器 div 或什么。我不想使用像 Bootstrap 这样的框架。我需要从头开始做这件事。你能取悦我吗？非常感谢

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convertibles</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>

    <div class="container">
        <header>
            <h1>Convertibles</h1>
            <p class="subtext">2-in-1 laptop plus tablet</p>
        </header>


        <ul class="item-list">

            <!-- Item 1 Start-->
            <li class="item item1">
                <img src="images/chromebookpro.jpg">
                <div class="item-text">
                    <h2>Google Pixelbook</h2>
                    <p class="pricing">Starting at $999</p>
                    <p>The first high performance Chromebook with Google Assistent built in. Features a four-in-one design offering laptop, tablet, tent, and entertainment modes, an all day battery with fast charging, a sleek aluminum body, and an optional pen. </p>
                    <p class="item-specs"> Key Specs</p>
                    <div class="item-text-specs">
                        <div class="item-list">
                            <p class="article">12.3" Quad HD LCD</p>
                            <p class="article">Intel processor&reg;</p>
                        </div>
                        <div class="item-list">
                            <p class="article">128/256/512 GB</p>
                            <p class="article">8/16 GB memory</p>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Item 1 End-->


            <!-- Item 2 Start-->
            <li class="item item2">
                <img src="images/chromebookpro.jpg">
                <div class="item-text">
                    <h2>Samsung Chromebook Pro</h2>
                    <p class="pricing">Starting at $549</p>
                    <p>The power of a Chromebook. The versatility of a tablet. A 360 degree rotating screen and an Intel&reg; Core&trade; M3 processor helps get things done. Write and create naturally with a built-in pen.</p>
                    <p class="item-specs"> Key Specs</p>
                    <div class="item-text-specs">
                        <div class="item-list">
                            <p class="article">12.3" Quad HD LCD</p>
                            <p class="article">Intel processor&reg;</p>
                        </div>
                        <div class="item-list">
                            <p class="article">32 GB eMMC</p>
                            <p class="article">1 x 4 GB memory</p>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Item 2 End-->

            <!-- Item 3 Start-->
            <li class="item item3">
                <img src="images/chromebookpro.jpg">
                <div class="item-text">
                    <h2>ASUS Chromebook Flip C302</h2>
                    <p class="pricing">Starting at $499</p>
                    <p>Flip between a high-performance Chromebook, a handy backlit tablet, and anything in between with a 360 degree hinge.</p>
                    <p class="item-specs"> Key Specs</p>
                    <div class="item-text-specs">
                        <div class="item-list">
                            <p class="article">12.5" (16:9) LED</p>
                            <p class="article">Intel processor&reg;</p>
                        </div>
                        <div class="item-list">
                            <p class="article">0.53" thin</p>
                            <p class="article">4/8 GB memory</p>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Item 3 End-->

        </ul>
    </div>
    <script src=""></script>
</body>

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {box-sizing: border-box;}

body {background-color: #FFFFFF;}

.container {
    padding: 1rem 1rem;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;

}
li {
    padding: 1rem; 
    /*background: #F8F9FA;*/
    color: #202020;
    opacity: 0.9;
}

li:hover {
    box-shadow: 1px 2px 3px 0px rgba(25,25,25,0.6);
    opacity: 1;
    transition:all 0.5s ease;  
}


h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 2.5em;
    color: #202124;
    text-align: center;
    margin-top: -20px;
    height: 25px;
    width: 100%;
}
h2 {
    margin: 0;
    font-family: 'Roboto', sans-serif;
  font-weight: lighter;
}
.subtext {
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 0.9em;
    color: #202124;
    text-align: center;         
}

.pricing {
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 0.9em;
    margin-top: 0em;
    color: grey;
}
p {
    color: #555;
    line-height: 2em;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    font-weight: bold;
}
img {
    width: 100%; margin-bottom:1.5rem; border-radius: 5px;
}

.item-specs {
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    padding: 0.8em 0;
    border-top: 1px solid #e7e7e7;
    color: black;
    margin-top: 2em;
    margin-bottom: -1em;
}


/* Flexbox Styling */

.item-list {
  display: flex; 
  flex-wrap: wrap;
  }
.item {
  flex: 100%;
  margin: 0 0 1.25rem;
}

.article {
  flex: 0 0 50%;
  font-family: 'Roboto', sans-serif;
  font-size: 0.7em;
  font-weight: lighter;

}

@media (min-width: 36em) {

.item { 
  flex: 0 0 calc( 50% - 1.25rem / 2 );
  margin-left: 1.25rem;
}

 .item:nth-child(odd){ 
   margin-left: 0;
 }  

}

@media (min-width: 60em) {
.item {flex: 0 0 calc(100% / 3 - 0.875rem);
}

.item:nth-child(odd), item:nth-child(even) { 
    margin-left: 1.25rem;
}

 .item:nth-child(3n+1) { 
  margin-left: 0;} 
}

最佳答案

有几种方法可以实现这一点。

静态

最简单但最脆弱的方法是将顶部部分包裹在 <div> 中确定最高框的高度，并将其设置为 min-height在 CSS 中。但是如果文本太长，或者框在不同的屏幕尺寸上调整宽度，这会遇到可维护性问题。

HTML

<li class="item item1">
    <div class="item-intro">
        <img src="images/chromebookpro.jpg">
        <h2>Google Pixelbook</h2>
        <p class="pricing">Starting at $999</p>
        <p>The first high performance Chromebook with Google Assistent built in. Features a four-in-one design offering laptop, tablet, tent, and entertainment modes, an all day battery with fast charging, a sleek aluminum body, and an optional pen. </p>
    </div>
    <div class="item-text-specs">
        <p class="item-specs"> Key Specs</p>
        <div class="item-list">
            <p class="article">12.3" Quad HD LCD</p>
            <p class="article">Intel processor&reg;</p>
        </div>
        <div class="item-list">
            <p class="article">128/256/512 GB</p>
            <p class="article">8/16 GB memory</p>
        </div>
    </div>
</li>

CSS

.item-intro {
    min-height: 300px;
}

动态 - 纯 CSS

另一种选择是为顶部和底部的元素描述制作两个框。然后使用 flexbox , 您可以使高度自动相互匹配。但这对于移动响应变得复杂，需要使用 order .您也可以使用 grid实现类似的目标。

HTML

<ul class="item-list">

    <!-- Item 1 Start-->
    <li class="item item1">
        <img src="images/chromebookpro.jpg">
        <div class="item-text">
            <h2>Google Pixelbook</h2>
            <p class="pricing">Starting at $999</p>
            <p>The first high performance Chromebook with Google Assistent built in. Features a four-in-one design offering laptop, tablet, tent, and entertainment modes, an all day battery with fast charging, a sleek aluminum body, and an optional pen. </p>
        </div>
    </li>

    <div class="item-text-specs item1">
        <p class="item-specs"> Key Specs</p>
        <div class="item-list">
            <p class="article">12.3" Quad HD LCD</p>
            <p class="article">Intel processor&reg;</p>
        </div>
        <div class="item-list">
            <p class="article">128/256/512 GB</p>
            <p class="article">8/16 GB memory</p>
        </div>
    </div>
    <!-- Item 1 End-->


    <!-- Item 2 Start-->
    <li class="item item2">
        <img src="images/chromebookpro.jpg">
        <div class="item-text">
            <h2>Samsung Chromebook Pro</h2>
            <p class="pricing">Starting at $549</p>
            <p>The power of a Chromebook. The versatility of a tablet. A 360 degree rotating screen and an Intel&reg; Core&trade; M3 processor helps get things done. Write and create naturally with a built-in pen.</p>
        </div>
    </li>
    <div class="item-text-specs item2">
        <p class="item-specs"> Key Specs</p>
        <div class="item-list">
            <p class="article">12.3" Quad HD LCD</p>
            <p class="article">Intel processor&reg;</p>
        </div>
        <div class="item-list">
            <p class="article">32 GB eMMC</p>
            <p class="article">1 x 4 GB memory</p>
        </div>
    </div>
    <!-- Item 2 End-->

    <!-- Item 3 Start-->
    <li class="item item3">
        <img src="images/chromebookpro.jpg">
        <div class="item-text">
            <h2>ASUS Chromebook Flip C302</h2>
            <p class="pricing">Starting at $499</p>
            <p>Flip between a high-performance Chromebook, a handy backlit tablet, and anything in between with a 360 degree hinge.</p>
        </div>
    </li>
    <div class="item-text-specs item3">
        <p class="item-specs"> Key Specs</p>
        <div class="item-list">
            <p class="article">12.5" (16:9) LED</p>
            <p class="article">Intel processor&reg;</p>
        </div>
        <div class="item-list">
            <p class="article">0.53" thin</p>
            <p class="article">4/8 GB memory</p>
        </div>
    </div>
    <!-- Item 3 End-->

</ul>

CSS

.item,
.item-text-specs {
  flex: 0 1 100%;
}

/* Only needed for desktop */
@media (max-width: 768px) {
  .item-text-specs.item1 {
    order: 4;
  }
  .item-text-specs.item2 {
    order: 5;
  }
  .item-text-specs.item3 {
    order: 6;
  }
}

动态 - JS

最后的选择是编写一个 JavaScript 片段，循环遍历顶部的框，找到最高的框，并将该高度应用到所有框。您将不得不修改您的 HTML 以在 <div> 中分隔顶部描述如 Static 示例中所述。我不打算编写 Javascript，因为它会很耗时，但它应该相对简单。如果框的宽度也发生变化，则最困难的功能将是在窗口大小发生变化时触发高度调整。因此，根据您对 Javascript 的熟悉程度，使用 jQuery 可能会更容易。

关于html - 如何使用 CSS 使某个部分彼此完全对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52412032/

html - 如何使用 CSS 使某个部分彼此完全对齐？

静态

动态 - 纯 CSS

动态 - JS

上一篇：php - 尝试显示按钮时出错

下一篇：c# - 如何通过电子邮件正文需要支持 HTML 的 SMTP 保留换行符