Question

我希望手机图像与底部对齐，以便它们全部水平对齐。一直在尝试一切，但无法让它工作。我保证我搜索了很多。也许我的搜索条件或描述不对，但我找不到解决方案。我感谢任何帮助。

木材框架

 div class="wrapper">
<div class="row content-grid-3">

    <div class="grid-item">
        <div class="feature-column medium left">
            <span class="feature-icon large icon-reelwards color-blue-light"></span>
                <div class="feature-text">
                    <h5>Reelwards</h5>
                        <p>In case it’s not enough connecting with your fellow anglers and getting all the tips you could want for free, NetFish also offers you Reelwards for using our app and building your social fishing network. Earn points in a number of ways, then trade them in for a variety of equipment and other fun items.</p>
                </div>
        </div>

        <div class="feature-column medium center">
                <img src="https://cdn.shopify.com/s/files/1/0240/7519/files/screen-reelwards_0b97aca8-818b-4ed4-94bf-0e84ddd52894.png?4986474463632102874" />
        </div>

    </div>

    <div class="grid-item">


        <div  class="feature-column medium left ">
            <span class="feature-icon large icon-images color-blue-light"></span>
                <div class="feature-text">
                    <h5>Share Photos</h5>
                        <p>With an easy to see layout and plenty of detail if you want to share, the Catch Feed details allows other users to see what you used to catch that monster...or minnow. Get ‘Likes’ and comments, start a conversation centered around your favorite catch!</p>
                </div>
        </div>

        <div class="feature-column medium center">
            <img src="https://cdn.shopify.com/s/files/1/0240/7519/files/screen-catch_photo_d9c20c6c-1f48-47e8-aedb-67d834aab403.png?4986474463632102874" />
        </div>

    </div>

    <div class="grid-item">

        <div  class="feature-column medium left">
            <span class="feature-icon large icon-recipes color-blue-light"></span>
                <div class="feature-text">
                    <h5>Recipes</h5>
                        <p>While we encourage catch-and-release fishing as much as possible, sometimes you’ll end up wanted to eat that beautiful fish you caught. Simply go to the Recipes section and look up the type of fish you caught to see our suggestions. Along with the recipe, you’ll also find beer and wine suggestions.</p>
                </div>
        </div>
        <div class="feature-column medium center">
            <img src="https://cdn.shopify.com/s/files/1/0240/7519/files/screen-recipe_8cf081cd-1938-4d52-9a26-90d65674e4d7.png?4986474463632102874" />
        </div>


    </div>
 </div>


</div>

Answer 1

您没有提供任何代码，因此我会告诉您许多方法的一种方法。添加到您的父级2个字段：display: flex和flex-direction: column以及您的内容（说明）添加flex: 1。 Flex：1会将描述扩展到尽可能最大。

需要帮忙！！！！图像下面的3个框文本图像对齐到底部

1 个答案: