Question

我一直在学习在线课程，无法获得一组文章以扩展以填充为每个部分ID分配的完整1000px。我可以添加更多文本，但这是一个快速解决方案，并且希望了解将来可以使用的更好的解决方案。我希望“玩家和比赛”部分都充分利用分配的全部1000像素。这也是我第一次尝试HTML / CSS，因此发现的其他任何提示或修复都将是一个很好的了解。

尝试对CSS文件中的类和ID进行许多更改。

HTML

            <article>
                <div class="player-image" style="background:url(data:image/)"></div>
                <a href="https://en.wikipedia.org/wiki/Sadio_Man%C3%A9"><h3>Sadio Mane</h3></a>
                <p>Europe's hottest winger goes into the final in red hot form<p>
            </article>

            <article>
                <div class="player-image" style="background:url(data:image/)"></div>
                <a href="https://en.wikipedia.org/wiki/Mohamed_Salah"><h3>Mohamed Salah</h3></a>
                <p>Our record breaking forward finds form at the ideal time<p>
            </article>

            <article>
                <div class="player-image" style="background:url(data:image/)"></div>
                <a href="https://en.wikipedia.org/wiki/Virgil_van_Dijk"><h3>Virgil Van Dijk</h3></a>
                <p>The man mountain destined to shut out Spurs in the final<p>
            </article>
                    <br /><br />

        </section>

        <section id="Matches">
            <article>
                <div class="game-image" style="background:url(data:image/)"> </div>
                <h3>Liverpool 4 - 0 Barcelona</h3>
                <p> blaaaaaaaaaa... <a href="#" class ="more-link">more...</a>
            </article>

            <article>
                <div class="game-image" style="background:url()"></div>
                <h3>Liverpool 2 - 0 Spurs</h3>
                <p> blaaaaaaaaaa... <a href="#" class ="more-link">more...</a>
            </article>

            <article>
                <div class="game-image" style="background:url(data:image/)"></div>
                <h3>Liverpool 5 - 1 Arsenal</h3>
                <p> blaaaaaaaaaa... <a href="#" class ="more-link">more...</a>
            </article>

        </section>

CSS

article {
    max-width:30%;
    display:inline-block;
    padding:5px;
    margin:5px;
    box-shadow: 1px 1px 10px #000;
    border-radius: 5px;
    border:2px solid #000;
    transition: box-shadow 1500ms;
    }

article img{
    max-width:100%;
}

#Players{
    width: 1000px;
    margin:auto;
    margin-top:20px;
    text-align:center;
    }

#Matches{
    width: 1000px;
    margin:auto;
    margin-top:20px;
    display:flex;
    flex-direction: row;
    align-items:stretch;
    }

.Player{
    text-align:center;

}

.player-image {
    height:200px;
    width:100%;
    background-size:cover !important;
    background-position:center !important;
    border:0px solid transparent;
    border-radius:25%;
}

.game-image {
    height:200px;
    width:100%;
    background-size:cover !important;
    background-position:center !important;
    border:0px solid transparent;
    border-radius:25%;

Answer 1

弹性成长：1； -使物品在主轴上均匀占据所有可用空间

拉伸div和图片以填充完整的部分ID，则出现部分ID =“ Matches”

1 个答案: