Question

我正在撰写Chrome扩展程序，我特别关注其中一个页面中的HTML布局。到目前为止，我有一些非常简单的事我有一个在javascript中动态更改的表，它需要保持在左侧。我还有一个DIV，它将成为一整套其他控件的容器，比如编辑字段和按钮。我希望这个主要的DIV出现在表的右边。

到目前为止我尝试过的所有东西都未能将DIV放到桌子的右侧。目前看来，我的DIV低于桌面。我听说使用浮动工作，但这看起来很hacky并且有一个有趣的副作用。也许我还没有真正理解HTML布局，即使我已经阅读过它们。我希望它更像Winforms，我可以告诉你去哪里。无论如何，如果有人可以帮助我了解实现我想要的布局的最佳和最干净的方法，我会很感激。我的代码如下：

<body>
    <div id="logged_in">
        <table id="contact_table">
            <tr>
                <th>Contact Name</th>
                <th>Phone Number</th>
            </tr>
        </table>
        <div id="interface">
            <p>Here are instructions.</p>
        </div>
    </div>
</body>

请注意，在上面的代码中，ID为'interface'的DIV应位于id为'contact_table'的表的右侧。

Answer 1

我不确定布局的全部范围，但是你有很多很多选择。这里有两个：

（不符合规定）将带有用户名/密码的表替换为“logged_in”div，作为当前拥有它的左侧TD内的嵌套表，并将您的界面控制在右侧的单独TD中。 / p>
添加一个浮动：左边的表格和一个浮点数：左边的界面div并用边距控制它的位置

Answer 2

你的div应该都设置为float：left;

这根本不是hacky，只是你如何让divs彼此显示（显示：内联也可以工作） - 但是你总是需要确保清除你的块（假设class ='fl '表示float：left和class ='ff'表示清除：both;）：

<div class='fl><!--table--></div><div class='fl'><!--other content--></div>
<div class='ff'><!--clear the float block--></div>

那应该让你开始 - 祝你好运！

Answer 3

<body>
<div id="logged_in">
    <table id="contact_table", style="float:left;">
        <tr>
            <th>Contact Name</th>
            <th>Phone Number</th>
        </tr>
    </table>
    <div id="interface">
        <p>Here are instructions.</p>
    </div>
</div>

将说明放在contact_table的右侧。

我会看一下像Blueprint这样的布局系统：http://blueprintcss.org/它非常适合控制对象，你不必总是依赖表。

Answer 4

使用浮动正是你应该在这里做的。

<table id="contact_table" style="float:left">

你可能也需要这个：

<div style="clear:left"></div>

在</body>标记之前。

需要HTML对齐提示

4 个答案: