需要HTML对齐提示吗_Html_Css_Html Table_Alignment

需要HTML对齐提示吗

html css

需要HTML对齐提示吗,html,css,html-table,alignment,Html,Css,Html Table,Alignment,我正在编写一个Chrome扩展，我特别关注我的一个页面中的HTML布局。到目前为止，我有一些非常简单的东西。我有一个用javascript动态修改的表，它需要保持在左边。我还有一个DIV，它是一整套其他控件的容器，比如编辑字段和按钮。我希望这个主DIV显示在表的右侧到目前为止，我所做的一切都没能把那个DIV放到我桌子的右边。就目前情况而言，我的DIV在表下。我听说使用float是可行的，但这似乎有点老套，而且有一个有趣的副作用。也许我还没有真正理解HTML布局，即使我读过它们。我希望它更像Wi

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

到目前为止，我所做的一切都没能把那个DIV放到我桌子的右边。就目前情况而言，我的DIV在表下。我听说使用float是可行的，但这似乎有点老套，而且有一个有趣的副作用。也许我还没有真正理解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”的表的右侧。

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

（不符合要求）将“logged_in”div替换为一个带有用户名/密码的表，作为左侧TD中的嵌套表，因为您当前在右侧的一个单独TD中拥有该表和您的界面控件

将float:left添加到表中，将float:left添加到接口div中，并使用左边距控制其定位

您的div都应该设置为float:left

这一点也不奇怪，这只是让div彼此相邻显示的方式（display:inline也可以），但是您始终需要确保清除块（假设class='fl'表示float:left，class='ff'表示clear:both；）：


联系人姓名
电话号码
这里有一些说明


将说明放在联系方式表的右侧
我会看一看像Blueprint这样的布局系统：它非常适合控制对象对齐，而且您不必总是依赖于表格。
使用浮点正是您在这里应该做的
<table id="contact_table" style="float:left">



您可能还需要：
<div style="clear:left"></div>



就在您的
标签前面。谢谢您的建议。我尝试了float:left（不带clear），我提到它感觉很粗糙，因为当我修改DIV的左边距时，它没有缩进。我发现这是因为你的边距必须大于桌子的宽度，我认为这有点破了。
<table id="contact_table" style="float:left">

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