Question

感谢我们在这里充满活力和梦幻般的社区。我正在开展一个项目，在这个项目中我需要很好地将所有块放在另一个之下，以免破坏我的设计。

我达到了一点，我有点陷入困境，并不是真的不想弄明白。

这是我的代码：

html

<div class="homepage-wrapper">
    <div class="homepage-top-category-container">
        <div class="homepage-top-category-container-title">
            <span id="homepage-top-category-container-title">Popular aisles</span>
        </div>
        <div class="homepage-top-category-container-list">
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
                        <div class="homepage-top-category-container-item-btn">
                            Browse perishables
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
                        <div class="homepage-top-category-container-item-btn">
                            Browse household
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
                        <div class="homepage-top-category-container-item-btn">
                            Browse pets
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
                        <div class="homepage-top-category-container-item-btn">
                            Browse baby & toddler
                        </div>
                    </div>
                </a>
            </div>
        </div>
</div>
</div>

<div class="homepage-banner">

<div class="homepage-banner-grid" id="homepage-banner-hc-description">
<div class="homepage-banner-hc-description-items" id="homepage-banner-hc-description-item1">
<div class="homepage-banner-hc-description-items-icon">
    <img src="http://bailbondsstatesboro.com/wp-content/uploads/2016/07/24_7_service.png" width="100" height="100">
</div>
<div class="homepage-banner-hc-description-items-text">
<span>Vivamus massa felis, eleifend quis rhoncus id, finibus id velit.</span>
</div>
</div>
<div class="homepage-banner-hc-description-items" id="homepage-banner-hc-description-item2">
<div class="homepage-banner-hc-description-items-icon">
    <img src="http://bailbondsstatesboro.com/wp-content/uploads/2016/07/24_7_service.png" width="100" height="100">
</div>
<div class="homepage-banner-hc-description-items-text">
<span>Vivamus massa felis, eleifend quis rhoncus id, finibus id velit.</span>
</div>
</div>
<div class="homepage-banner-hc-description-items" id="homepage-banner-hc-description-item3">
<div class="homepage-banner-hc-description-items-icon">
<img src="http://bailbondsstatesboro.com/wp-content/uploads/2016/07/24_7_service.png" width="100" height="100">
</div>
<div class="homepage-banner-hc-description-items-text">
<span>Vivamus massa felis, eleifend quis rhoncus id, finibus id velit.</span>
</div>
</div>
</div>

这是css：

.homepage-wrapper {
    max-width: 1043px;
    margin-left: auto;
    margin-right: auto;
}
.homepage-top-category-container-title {
    color: #808080;
    margin-top: 15px;
    padding: 15px 0 15px 0;
    font-weight: bold;
    letter-spacing: -1px;
}
#homepage-top-category-container-title {
    color: ##808080;
    margin-left: 15px;
}
.homepage-top-category-container-list {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
}
.homepage-top-category-container-list > div {
    margin-left: 15px;
    margin-bottom: 15px;
}
.homepage-top-category-container-item {
    display: block;
    float: none;
    width: auto;
    height: auto;
    border: solid 1px #d0d0ce;
    position: relative;
    border-radius: 3px;
}
.homepage-top-category-container-item:hover {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
    -moz-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
    box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
}
#homepage-top-category-container-item-a {
    width: 240px;
    height: 360px;
}
#homepage-top-category-container-item-b {
    width: 240px;
    height: 360px;
}
#homepage-top-category-container-item-c {
    width: 240px;
    height: 360px;
}
#homepage-top-category-container-item-d {
    width: 240px;
    height: 360px;
}
.homepage-top-category-container-item-btn {
    background-color: #cde5d9;
    color: black;
    position: absolute;
    padding: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #d0d0ce;
    border-bottom: 2px solid #d0d0ce;
}


.homepage-banner-grid{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    }
.homepage-banner-hc-description-items{
    height: 150px;
    background-color: yellow;
    margin-left: 15px;
    }
/*
.homepage-banner-hc-description-items:first-child{
    margin-left:0px;
    }
.homepage-banner-hc-description-items:last-child{
    margin-right:0px;
    }
*/  
#homepage-banner-hc-description-item1{
    background-color: pink;
    margin-bottom: 15px;
    margin-left: 15px;
    }
#homepage-banner-hc-description-item2{
    background-color: green;
    margin-bottom: 15px;
    }
#homepage-banner-hc-description-item3{
    background-color: orange;
    margin-bottom: 15px;
    }
.homepage-banner-hc-description-items-icon{
    display: block;
    float: left;
    background-color: red;
    width: auto;
    height: 100%;
    }
.homepage-banner-hc-description-items-text{
    display: flex;
    height: 140px;
    text-align: center;
    }
.homepage-banner-hc-description-items-text span {
    margin-top: auto;
    margin-bottom: auto;
    }

我非常感谢帮助将4个顶部块与3个底部块对齐。我希望整个事情能够很好地对齐，所以它看起来很专业。

JSfiddle here - ＆gt; https://jsfiddle.net/hkz6g5sn/

感谢。

**************** EDIT ****************************

目前在我的屏幕上看起来像这样：

我想这样做：

Answer 1

有点黑客但是这样做会有什么理由你没有使用库来处理网格？你可以通过媒体查询解决这个问题，但它会取代代码。

   .homepage-wrapper {
        max-width: 1043px;
        margin-left: auto;
        margin-right: auto;
    }
    .homepage-top-category-container-title {
        color: #808080;
        margin-top: 15px;
        padding: 15px 0 15px 0;
        font-weight: bold;
        letter-spacing: -1px;
    }
    #homepage-top-category-container-title {
        color: ##808080;
        margin-left: 15px;
    }
    .homepage-top-category-container-list {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        height: auto;
    }
    .homepage-top-category-container-list > div {
        margin-left: 15px;
        margin-bottom: 15px;
    }
    .homepage-top-category-container-item {
        display: block;
        float: none;
        width: auto;
        height: auto;
        border: solid 1px #d0d0ce;
        position: relative;
        border-radius: 3px;
    }
    .homepage-top-category-container-item:hover {
        -webkit-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
        -moz-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
        box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
    }
    #homepage-top-category-container-item-a {
        width: 240px;
        height: 360px;
    }
    #homepage-top-category-container-item-b {
        width: 240px;
        height: 360px;
    }
    #homepage-top-category-container-item-c {
        width: 240px;
        height: 360px;
    }
    #homepage-top-category-container-item-d {
        width: 240px;
        height: 360px;
    }
    .homepage-top-category-container-item-btn {
        background-color: #cde5d9;
        color: black;
        position: absolute;
        padding: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 1px solid #d0d0ce;
        border-bottom: 2px solid #d0d0ce;
    }

    .homepage-banner-grid{
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        }

    .homepage-banner-hc-description-items{
        height: 150px;
        background-color: yellow;   
        max-width: 328px; // here
        }

      .margin-left {
        margin-left: 15px; // here
      }
    /*
    .homepage-banner-hc-description-items:first-child{
        margin-left:0px;
        }
    .homepage-banner-hc-description-items:last-child{
        margin-right:0px;
        }
    */  
    #homepage-banner-hc-description-item1{
        background-color: pink;
        margin-bottom: 15px;
        }
    #homepage-banner-hc-description-item2{
        background-color: green;
        margin-bottom: 15px;
        }
    #homepage-banner-hc-description-item3{
        background-color: orange;
        margin-bottom: 15px;
        }
    .homepage-banner-hc-description-items-icon{
        display: block;
        float: left;
        background-color: red;
        width: auto;
        height: 100%;
        }
    .homepage-banner-hc-description-items-text{
        display: flex;
        height: 140px;
        text-align: center;
        }
    .homepage-banner-hc-description-items-text span {
        margin-top: auto;
        margin-bottom: auto;

}

如果您只是将.margin-left添加到第二个和第三个项目，将宽度保持为100％

如何很好地对齐我的积木？

1 个答案: