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;而不是列数：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>

列不是内联的？

1 个答案: