需要 HTML 对齐技巧答案

【问题标题】：Need HTML alignment tips需要 HTML 对齐技巧
【发布时间】：2011-06-23 05:25:30
【问题描述】：

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

到目前为止，我尝试的所有方法都未能将 DIV 放在我的桌子右侧。就目前而言，我的 DIV 位于表格下方。我听说使用 float 有效，但这似乎很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”的表的右侧。

【问题讨论】：

标签： html css html-table alignment

【解决方案1】：

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

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

你可能还需要这个：

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

就在您的 </body> 标签之前。

【讨论】：

【解决方案2】：

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

（不合规）将“logged_in”div 替换为具有用户名/密码的表格作为左侧 TD 内的嵌套表格，就像您当前拥有的那样，并且您的界面控件在右侧的单独 TD 中。
在表格中添加 float:left 和在界面 div 中添加 float:left 并使用 margin-left 控制其定位

【讨论】：

【解决方案3】：

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

这根本不是 hacky，它只是让 div 彼此相邻显示的方式（display:inline 也可以工作） - 但是你总是需要确保清除你的块（假设 class='fl ' 表示 float:left 和 class='ff' 表示 clear:both;):

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

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

【讨论】：

感谢您的建议。我尝试了 float:left （没有清除），我提到它感觉很糟糕，因为当我修改 DIV 的左边距时，它没有缩进它。我发现这是因为你的边距必须大于桌子的宽度，我认为这有点破损。

【解决方案4】：

<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/ 它非常适合控制对象对齐，而且您不必总是依赖表格。

【讨论】：