Html Divs赢得'；t定位正确

我试图用divs显示我的web应用程序，但是它似乎显示不正确。我想要标题，图片左边的描述在图片的右边，我已经设法得到了正确的答案

然而，我希望我的份数、准备时间、器皿、配料和最后的方法都能按顺序进行。但是它不工作，我已经创建了一个，如果你能更新它并提供帮助，那就太好了

<div id="description">
    <p class="textDes">
        <label for="descrip">Enter a recipe Description</label>
        <input type="text" name="descrip" >
    </p>
</div>

输入配方说明

---

像这张图片一样

将

清除：左

添加到

#portionPrep

中，并且不要在其中浮动div

---

这是一个更整洁的JSFIDLE版本：我建议把这个放在你上面的描述中。@Nick你能画些东西，展示一下你想要达到的目标吗？我只想让我的器具部门在准备阶段，然后在器具下划分成分，然后在工具下划分方法ingredient@PraveenKumar好主意是的，请给我们一个草图。这是非常混乱和无用的代表你想要什么。此外，您还需要包含我们无法访问的javascript代码（

js/app.js

和

js/jquery.elastic.source.js

）OP主要需要演示文稿，因此仅图像就可以帮助我们理解OP需要什么，并在可能的情况下进行更正。你觉得@NickPoock怎么样？效果很好，你能不能快速解释清楚：左？感谢

clear

属性清除其方向上的浮动元素，这与让这个div占据100%的宽度是一样的。