如何安排不同的<section>元素在<article>元素内部流入</article> </section>

Question

我需要创建一个网站，其中包含文章/部分或ul / li等元素，以便内联流动，除非行中没有空间，此时下一个项目将落在下面并开始新的元素行。这是标记：

<article style="display:inline; width:900px; height:1000px;">
  <section  class="featured">
    <p>Hello ye wanderers...</p>
    <p>Salutations!</p>
  </section>
  <section  class="featureds">
    <p>A little message here</p>
  </section>
  <section  class="featureds">
    <p>A little message there</p>
  </section>
  <section  class="featureds">
    <p>This is that and so what?</p>
  </section>
</article>

这就是盒子的风格：

.featured {
    position:relative;
    width:450px;
    height:100px;
    background-color: #eee;
    border-color: #000;
    border-width: 2px;
    border:1px solid #333;
}
.featureds {
    position:relative;
    width:150px;
    height:100px;
    background-color: #eef;
    border-color: #000;
    border-width: 2px;
    border:1px solid #333;
}

这是显示我使用此代码获得的内容以及我想要获得的内容的图像。

现在，我知道如何使用position：absolute来做到这一点，但这不是我想要做的。我需要用最少的HTML和CSS争论来做到这一点！

如果有人有想法，我将非常感谢您的帮助

TIA

DK

Answer 1

浮动左边的部分：

.featureds {
    position:relative;
    width:150px;
    height:100px;
    background-color: #eef;
    border-color: #000;
    border-width: 2px;
    border:1px solid #333;
    float:left;
}

<强> jsFiddle example

Answer 2

添加浮动：左;到.featureds

部分

section .featureds{
    float:left;
}