2012-11-16 184 views
4

what I want這基本上是我想要的。在左側記錄ID,然後在右側記錄實際的帖子。相反,我得到this.問題定位div

body{ 
    background-color: #333333; 
    color: #ffffff; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16pt; 
} 
h2{ 
    display:inline; 
} 
h2 a{ 
    color:#ffffff; 
} 
hr{ 
    border: 1px solid #db8039; 
} 
.post { 
    margin-left:auto; 
    margin-right:auto; 
    width: 66%; 
    background-color: #1a1a1a; 
    border-radius:10px; 
    font-size: 15px; 
    padding: 10px 10px 5px 10px; 
} 
.button{ 
    background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222)); 
    background: -moz-linear-gradient(top, #333, #222); 
    color:#888; 
    height:40px; 
} 
div.test{ 
    border: 1px solid white; 
} 

<div id="post'.$row['postId'].'" class="post"> 
     <div id="left" style="float:left"> 
     <h2>0</h2> 
     </div> 
     <div id="right"> 
     <div style="float:left;"> 
      <h2><a href=#>TITLE</a></h2> 
     </div> 
     <div style="float:right;"> 
      Posted By: USER on DATE 
     </div> 
     <br style="clear:both;"/> 
     <hr /> 
     <p>BODY</p> 
     </div> 
</div> 

我敢肯定,這是做非常簡單,我只是茫然,我的CSS技巧...分面值,我想。

任何幫助將不勝感激!謝謝!

+0

浮動項目需要有一個定義的寬度。 –

回答

3

我做了一個完整的新的1,如果你想看看

Demo

編輯:New Demo

HTML

<div class="container"> 
    <div class="count">1</div> 
    <div class="upper">Test 2</div> 
    <hr> 
    <div class="down">Body</div> 
</div> 

CSS

.container { 
    width: 500px; 
    height: 100px; 
    background: #000; 
    position: relative; 
} 

.count { 
    float: left; 
    color: #fff; 
    font-size: 30px; 
    line-height: 100px; 
    width: 50px; 
    text-align: center; 
} 

.upper { 
    color: #fff; 
    font-size: 22px; 
    line-height: 40px; 
} 

.down { 
    color: #fff; 
    font-size: 22px; 
    line-height: 40px; 
} 

雖然我不建議使用這個,這將是很容易實現這一點使用表太

Table Demo

HTML

<table border="1"> 
    <tr> 
     <td rowspan="2">&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

CSS

table { 
    width: 50%; 
    margin: 30px; 
} 

table tr:nth-child(1) td:nth-child(1) { 
    width: 100px; 
} 
+0

謝謝!我現在正在轉換它。我試圖避免使用表格,但是感謝您抽出時間將其作爲選項發佈! – FunkyMonk91

+0

@ FunkyMonk91歡迎你,也讓它更清潔,給我一分鐘 –

+1

在這裏,你去,一個新的1 ... http://jsfiddle.net/dPX8J/26/ –

1

嘗試增加以下規則:

#left{ 
    width:5%; 
    display:inline-block 
} 
#left h2{ 
font-size:40px; 
} 
#right{ 
    width:94%; 
    display:inline-block 
} 

jsfiddle:http://jsfiddle.net/dPX8J/15/