1

我有以下html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    </head>
<body>

    <table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
        <tr>
            <td>
                <div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
                <div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;">R</div>
            </td>
        </tr>
    </table>
</body>
</html>

我希望带有 R & L 的绿色框在没有使用 JS 的情况下位于同一行，我该怎么做？

4

5 回答 5

3

只需添加“浮动：左；” 到框 L 上的样式属性并添加“float:right;” 到框 R 上的样式属性

然后在 td 标签处添加 valign="top" 。如果您希望它与顶部对齐，则为框的父标签。

见下面的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<body>

    <table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
        <tr>
            <td valign="top">
                <div style="float:left;margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
                <div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;float:right;">R</div>
            </td>
        </tr>
    </table>
</body>
</html>
于 2012-07-19T08:05:43.380 回答
1

添加css样式“ float:left;”。它会解决这个问题。

于 2012-07-19T07:54:22.357 回答
1

您可以使用 css display: inline-block。请注意，这在旧版浏览器中不起作用。

或者，您可以使用float: left.

于 2012-07-19T07:54:44.823 回答
1 
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px; float:left;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px; float:left;">R</div>
于 2012-07-19T07:56:54.430 回答
1

您可以float: left仅将 css 添加到 DIV L；

或者您可以将 css 添加float: left到 DIV L 和float: rightDIV R。

最终，这取决于您要在这里实现的目标。

于 2012-07-19T08:03:31.777 回答