html - CSS定位——两个元素并排

Question

好的，我知道这个问题已经在这里至少出现了数百次，但这种定位让我发疯 - 有人可以帮助我吗？

我有一个带有表格和 div 标记的 portlet 页面(基本上是 html)。我想将它们放在一起(左边的表，右边的 div)。这是我的 html 的一部分:

<div id="page>

 <table id="logtable">
  ...
 </table>

 <div id="divMessage>
  ...
 </div>
</div>

...和 ​​CSS:

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}

#logtable {
    width: 800px;
    float: left;
}

#divMessage {
    width: 350px;
    position:relative;
    right:-5px;
    top: -20px;
}

我已经尝试过各种位置 - 绝对、固定、 float 等，但我似乎无法做到正确...感谢您的帮助!

Answer 1

你可以使用...

float: left;

在你的 div 'logtable' 上

我建议使用 DIV 来对齐内容，因此将表格包装在 DIV 中。 我也更喜欢使用 inline-block 而不是 float left 并给出更可预测的结果。

所以...

<div id="page">
 <div id="divTable" class="InsideContent">
     <table id="logtable">
      Left
     </table>
  </div>

 <div id="divMessage" class="InsideContent">
  Right
 </div>
</div>

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}
.InsideContent{
    display:inline-block;
}
}
#divTable {
    width: 800px;
}
#divMessage {
    width: 350px;
}

代码需要整理，但你明白了......

JSFiddle http://jsfiddle.net/3N53d/