我该如何调整我的div呢？

Question

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

这就是我目前所拥有的：

有谁知道我怎么能在一行上找到“Jan”和“schreef om 15 Januari 2013 om 12:32”部分，在图像的顶部，它下面的lorem ipsum，最后是“Footer” “图像下面？

这是我的代码：

    <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”分为2个不同的div。如果您希望它们位于同一行，只需添加display: inline-block

即可

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

jsFiddle link