管理和定位CSS <divs>

Question

我正在努力實現這一目標：

...作為我網站（runic-paradise.com）上新聞報道的一種格式。 您可以看到除了橙色位以外，我已經實現了所有功能。 我正在嘗試使橙色的點成為自己的div，以便將它們置於彩色方形背景中-類似於以下內容：

...但是，我似乎無法讓div做我想做的事情。 最終弄亂了保存圖像和文本內容的2個較低的div。 任何人都有如何實現此目標的快速提示？ :(

到目前為止，我擁有的是：

http://jsfiddle.net/HDbq6/1/

HTML：

<div class="articleshell">
     <div class="articletitle">
     <h4 class="newstitleh4">A shining beacon in the desert - November 5, 2013</h4>
     </div>
     <div class="articleauthor">
     Author
     </div>
     <div class="articleimg">
     <a href="images/EukitoDesertTemple.jpg" data-rel="prettyPhoto[gal]" title="Eukito's Desert Temple"><img src="images/thumbs/EukitoDesertTempleThumb.jpg" width="90" height="90" class="news_thumb" alt="Eukito's Desert Temple" /></a>
     </div>
     <div class="articletext">
     <p>Eukito has completed construction of his desert temple. Of course no temple is complete without a secret passage or two... Stop on by at night to see it shining in the desert!</p>
     </div> 

</div>  

CSS

.articleshell {
    width: 770px;
    max-height: none;
    min-height: 130px;
    padding-top: 5.px;
    padding-right: 5.px;
    padding-bottom: 5.px;
    padding-left: 5.px;
    padding-top: 1px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    background-color: #564D4D;
}
.articletext {
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    clear: both;
}
.articleimg {
    float: left;
    margin-right: 15px;
    margin-bottom: 5px;
    width: 90px;
    height: 90px;
    margin-left: 5px;
    clear: both;
}
.articletitle {
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 3px;
    float: left;
}
.newstitleh4 {
    margin-bottom: 2px;
    margin-top: 2px;
}
.articleauthor {
    float: left;
    text-align: right;
}
.articlecontent {
    clear: both;
}

Answer 1

像這樣嗎？

小提琴

.main{width:500px; height:200px; border:1px solid #ccc; background:#f3f3f3; padding:5px;}
#title{width:45%; background:#ccc; border:1px solid #333; display: inline-block;}
.buttons{width:15%; background:orange; display: inline-block; border:1px solid #333;}
.mainContent{ width:100%; color:#ccc; border:1px solid #333; margin-top:5px; height:170px;}



<div class="main">
    <div id="title">Title</div>
        <div class="buttons">Author</div>
        <div class="buttons">Role</div>
        <div class="buttons">Date</div>
    <div class="mainContent"></div> 
</div>

標題ID具有display：inline-block和div來獲取縮略圖和文本內容，這樣“按鈕”不會弄亂內容。 （我認為）