Question

我不是前端开发人员，但对于HTML5课程，我正在尝试理解一些HTML5和样式。我有以下代码：这些是与图像和文本并排的文章的开头，我的问题是，如何让它们并排排列？

   <div>
        <section> 
        <article>
        <header><h1>article 1</h1></header>      
        <p>Some Text</p>
        </article>
       </section> 
       <section>
        <article>
        <header><h1>article 2</h1></header>
        <p>Some Text</p>
        </article>
        </section>
        <section>
       <article>
        <header><h1>article 3</h1></header>
        <p>Some Text</p>
        </article>
        </section>
        </div>

另外，我如何获得标题下的<p>，现在它是否在标题的左侧？

Answer 1

首先，您不应该为每个<section>使用<article>，相反，您可能希望<section>替换<div>并将所有文章嵌套作为兄弟姐妹，就像这样：

<section>
    <article>
        <header><h1>article 1</h1></header>
        <p>Some Text</p>
    </article>
    <article>
        <header><h1>article 2</h1></header>
        <p>Some Text</p>
    </article>
    <article>
        <header><h1>article 3</h1></header>
        <p>Some Text</p>
    </article>
</section>

至于将它们并排放置，最好的选择是使用flexbox（参见 browser support ）

以下是我提出的建议：

<style type="text/css">
    section {
        display: flex;
    }

    section article {
        flex: 1 100%;
    }
</style>

<section>
    <article>
        <header><h1>article 1</h1></header>
        <p>Some Text</p>
    </article>
    <article>
        <header><h1>article 2</h1></header>
        <p>Some Text</p>
    </article>
    <article>
        <header><h1>article 3</h1></header>
        <p>Some Text</p>
    </article>
</section>

使用flex: 1 100%;，您可以确保3占用其容器的所有水平空间。

了解详情： CSS-Tricks: A complete guide to flexbox

如何让我的文章浮动左

1 个答案: