4

私が欲しいものこれは基本的に私が欲しいものです。左側にIDを記録し、次に右側に実際の投稿を記録します。代わりに私はこれを手に入れます。

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スキルは...私が思うに標準以下です。

どんな助けでも大歓迎です！ありがとう！

4

2 に答える 2

3

あなたがそれをチェックしたいのであれば、私は完全に新しい1を作りました

デモ

編集：新しいデモ

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;
}

これを使用することはお勧めしませんが、テーブルを使用してこれを実現する方がかなり簡単です。

テーブルデモ

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;
}
于 2012-11-16T16:43:28.133 に答える
1

次のルールを追加してみてください。

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

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

于 2012-11-16T16:47:03.740 に答える