Question

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

我有一个portlet页面（基本上是html），带有一个表和一个div标签。我想把它们放在一起（左边是桌子，右边是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;
}

我尝试了各种各样的职位 - 绝对，固定，浮动等，但我似乎无法做到正确...感谢您的帮助！

Answer 1

你可以使用......

float: left;

你的div'logtable'上的

我建议使用DIV来对齐内容，以便将表格包装在DIV中。我也更喜欢在浮动左侧使用内联块，并提供更可预测的结果。

所以...

<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/

Answer 2

我发现您忘记在<div id="page>关闭引号，这可能会导致一些问题，但基本上您必须使用：

float: left;

为最后一个div。

我为您创建了此JSFiddle，以确定这是否符合您的需求。

Answer 3

对应位于左侧的元素和右侧的float:left使用float:right。请记住，如果它们的宽度总和超过父元素中的可用空间，它们将被分成两行。

Answer 4

你去，不需要右：-5px;

#divMessage {
    width: 350px;
    position: relative;
    top: -20px;
    float: left;
}

Answer 5

您可以使用display: inline-*将它们并排排列

#logtable {
    width: 800px;
    display: inline-table;
}

#divMessage {
    width: 350px;
    display: inline-block;
}

JSFiddle

Answer 6

试试吧。

Fiddle

<强> CSS

#logtable {
    width: 500px;
    float: left;
    background:red;
}

#divMessage {
    width: 350px;
    position:relative;
    float:left;
    background:blue;
}

Answer 7

试试这个：

 <table id="logtable">
    <tr>
        <td>
            table area
        </td>
     </tr>
 </table>

 <div id="divMessage">
  div area
 </div>
</div>  
#page {
    width: 800px;
    margin: 0px auto -1px auto;
    padding: 15px;
    border:red solid 1px;
    height:170px;
}
#logtable {
    width: 400px;
    height:150px;
    float: left;
    border: blue dashed 1px;
}

#divMessage {
    width: 350px;
    height:150px;
    right:-5px;
    top: -20px;
    border: green dashed 1px;
    float:right;
}

here is a smaple

Answer 8

简单来说，我们可以这样做：

table#logtable, div.divMessage{
 display:inline-block;
}

或者

table#logtable, div.divMessage{
 float:left;
 width:50%;
}

CSS定位 - 彼此相邻的两个元素

8 个答案:

Fiddle