Question

what I want 这基本上就是我想要的。记录ID在左侧，然后是右侧的实际帖子。相反，我得到this.

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技能是......我认为不合格。

任何帮助将不胜感激！谢谢！

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

Answer 2

尝试添加以下规则：

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

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

有定位div的问题

2 个答案: