Question

我有一个简单的php页面，主要内容放在一个居中的表中。我想放置一个从右上角开始的菜单。代码是这样的：

    echo "<table class=\"center\">";
    while($row= mysql_fetch_array($query))
    {
        echo "<tr>";
        echo "<td>";
        ... content...
        echo "</td>";
        echo "</tr>";
    }
    echo "</table>";

    echo "<table class=\"topRightTable\">";
    while($row= mysql_fetch_array($query2))
    {
   echo "<tr>";
    echo "<td>";
    ... content ...
    echo "</td>";
    echo "</tr>";
    }
    echo "</table>";

用这个css：

    table.center 
    {
    margin-left: auto; 
     margin-right: auto;
    text-align: left;
    }

    table.topRightTable
    {
    position:absolute;
    top:50;
    right:50;
    }

    body
    {
    min-width: 600;
    }

这样可以正常工作，直到窗口调整大小。然后右侧菜单将随窗口一起浮动，位于其他元素上方。如何避免菜单项随窗口一起移动？

我试图将页面的最小宽度设置为600，并希望这会阻止正确的菜单进一步移动，但没有运气。

qustion是：如何防止右菜单表与中心表碰撞

Answer 1

另一个答案是正确的。假设你的表的父亲是正文：

body, html{
    margin:0px;
    padding:0px;
    width:100%;
    min-width:600px;
}
table.center {
    margin-left: auto; 
    margin-right: auto;
    text-align: left;
}

table.topRightTable{
    float:right;
}

如果<body>不是父母，请将其更改为.parent{ min-width:600px;}

Answer 2

您已将表定位为绝对值，这意味着它不会与其他元素在同一平面中呈现。如果您希望表保持位置：绝对，则使其他元素也位于绝对位置，并将所有元素放入一个位于的容器中：相对于设置的宽度。或者（甚至更好）浮动元素。

如何在调整窗口大小时阻止HTML元素移动？

2 个答案: