Question

我正在努力实现这一目标：

enter image description here ...作为我网站上新闻文章的格式（runic-paradise.com）。你可以看到我已经实现了除橙色位之外的所有东西。我试图让橙色的比特成为他们自己的div，所以我可以将它们放在彩色方形背景中 - 就像这样：

enter image description here

...然而，我似乎无法让div去做我想做的事。它最终弄乱了2个较低的div，其中包含图像和文本内容。任何人都有关于如何实现这一目标的快速提示？：（

JSFiddle我到目前为止：

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

这样的东西？

fiddle

.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有一个显示：inline-block和div来获取拇指和文本内容，这样“按钮”就不会弄乱内容。（我认为）

管理和定位CSS <divs> </divs>

1 个答案: