Question

我有一个问题 - 我必须对网页进行3列布局，文章摘录之间有相同的底边和边距，问题是摘录有不同的高度。如果我将使用花车并且如果我将使用flexbox，我可以在这种情况下做什么？

<div class="articles-wrap">
            <article>
                <div>
                <img src="http://s18.postimg.org/h9hu35mq1/post-img-1.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>

            <article>
                <div>
                <img src="http://s18.postimg.org/442bx1suh/post-img-2.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus quis neque nisi. Pellentesque non vestibulum ex.</p>
            </article>

            <article class="last-in-row">
                <div>
                <img src="http://s18.postimg.org/rtrrlqr7t/post-img-3.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>

            <article>
                <div>
                <img src="http://s18.postimg.org/rtrrlqr7t/post-img-3.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>

            <article>
                <div>
                <img src="http://s18.postimg.org/h9hu35mq1/post-img-1.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>

            <article class="last-in-row">
                <div>
                <img src="http://s18.postimg.org/442bx1suh/post-img-2.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>
            <article>
                <div>
                <img src="http://s18.postimg.org/h9hu35mq1/post_img_1.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>
            <article>
                <div>
                <img src="http://s18.postimg.org/442bx1suh/post-img-2.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>
            <article class="last-in-row">
                <div>
                <img src="http://s18.postimg.org/rtrrlqr7t/post_img_3.jpg" alt=""></div>
                <h3>This is blog post title</h3>
                <p>Phasellus in tincidunt velit. Etiam fermentum fringilla tristique. Aenean posuere aliquam interdum. Sed dignissim turpis eget leo ultricies ultricies. Sed et felis leo, eget dapibus massa. Etiam volutpat vehicula dolor, vel placerat odio posuere non.</p>
            </article>
        </div>

示例代码为here

Answer 1

根据要求，您可以选择以下选项 1.给文章赋予相同的高度并给出溢出-y：滚动，以便如果文本超出文章的高度，则会出现滚动 2.如果您不想滚动并且您知道文本的最大可能长度是多少，那么相应地调整文章的高度或给出文本限制

Answer 2

据我所知，可以使用flexbox模块完成，但前提是您知道子块的最终数量（本例中的文章摘录）并设置父块的高度。

在多列布局中在块之间创建相等的顶部（或底部）边距

2 个答案: