html - 如何像这样对齐我的 div？

Question

这是我想要实现的目标的图像:

这就是我目前拥有的:

有谁知道我如何将“Jan”和“schreef om 15 Januari 2013 om 12:32”部分放在一行中，靠近图像顶部，下面是 lorem ipsum，最后是“页脚” “在图像下面？

这是我的代码:

    <aside class="previewPost" id="HTMLPreview">
                  <article>
                    <div id="imageDiv">
                        <img src="img/avatar.png" alt="Avatar"  width="150" height="150" id="imageHTML"/>
                    </div>

                    <div id="firstNameDiv">
                        Jan
                    </div>

                    <div id="dateDiv">
                        schreef om 15 Januari 2013 om 12:32
                    </div>

                    <div id="postDiv">
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    </div>

                    <div id="fullname">
                    Jan met de korte achternaam (24)
                    </div>

                    <div id="workDiv">
                    student
                    </div>


                </article>
            </aside>            

这是侧边栏的 CSS:

 .previewPost{
width: 40%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
background-color: #FFF; 
padding: 2% 3%;
margin-bottom: 2%;
}

有人能帮帮我吗？

Answer 1

“Jan”和“schreef om 15 Januari 2013 om 12:32”被分成两个不同的 div。如果您希望它们在同一行，只需添加 display: inline-block

#firstNameDiv, #dateDiv{
     display: inline-block   
}

jsFiddle link