Html 我如何让我的文章飘到左边

我不是一个前端开发人员，但对于我正在学习的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>

---

另外，如何在标题下获取，现在它位于标题的左侧？

首先，您不应该对每个标题都使用a

以下是我的想法：

<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>

有弹性：1100%；你要确保这三个人占据了他们容器的所有水平空间

---

阅读更多信息：

取决于您的浏览器支持需要IE10+，您可能想看看flexbox。我已经安装了IE 11。您是否尝试过任何CSS？我会这样做。。。我只是不知道发生这种情况的属性是什么。这已经开始起作用了，但第1条不在页面的左侧。但是谢谢你把我带到这一点

<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>