html - 列不是内联的？

Question

我正在尝试创建两列，上面有一个共享标题。

但是，每当我使用:

.quick-links {
    column-count: 2;
}

两列中的文本不是内联的。这就是我的意思: https://gyazo.com/9446be53ea0d402c52b84768f13f090d

它可能对每个人来说都不是很明显，但是，相信我，它就在那里，它让我烦透了!

关于如何解决这个问题有什么想法吗？

HTML:

<section class="quicklinks">
    <h1>Quicklinks:</h1>
    <div class="quick-links">
        <!-- Client Reviews -->
        <figure class="reviews">
            <img src="images/RatingsTick.png" alt="Ratings Tick Image">
            <figcaption class="port-desc">
                <p><strong>Reviews</strong></p>
            </figcaption>
        </figure>

        <!-- Portfolio -->
        <figure class="portfolio">
            <img src="images/Portfolio.png" alt="Portfolio Image">
            <figcaption class="port-desc">
                <p><strong>Previous Work</strong></p>

            </figcaption>
        </figure>
    </div>

</section>

CSS:

.quick-links img {
    height: 7.5em;
    width: 7.5em;
    border-radius: 10em;
}

.quick-links {
    column-count: 2;
}

.quick-links h1 {
    column-span: all;
}

Answer 1

试试 display: flex; 而不是 column-count:2

 
.quick-links img {
    height: 7.5em;
    width: 7.5em;
    border-radius: 10em;
}

.quick-links {
    display: flex;
    justify-content: center;
}

.quick-links h1 {
    column-span: all;
}

<section class="quicklinks">
    <h1>Quicklinks:</h1>
    <div class="quick-links">
        <!-- Client Reviews -->
        <figure class="reviews">
            <img src="images/RatingsTick.png" alt="Ratings Tick Image">
            <figcaption class="port-desc">
                <p><strong>Reviews</strong></p>
            </figcaption>
        </figure>

        <!-- Portfolio -->
        <figure class="portfolio">
            <img src="images/Portfolio.png" alt="Portfolio Image">
            <figcaption class="port-desc">
                <p><strong>Previous Work</strong></p>

            </figcaption>
        </figure>
    </div>

</section>