需要HTML对齐提示

我在写一个Chrome扩展，我特别关注我的一个页面中的HTML布局。到目前为止我有一些非常简单的东西我有一个在javascript中动态更改的表格，它需要保留在左侧。我也有一个DIV，它将成为整套其他控件的容器，比如编辑栏和按钮。我希望这个主DIV出现在表格的右侧。需要HTML对齐提示

我到目前为止所尝试过的一切都未能得到我的表格右边的DIV。就目前来看，我的DIV低于桌子。我听说使用浮动工程，但这看起来很拙劣，并且有一个有趣的副作用。也许我还没有真正理解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“接口”的DIV应该是放在桌子上的ID为“contact_table”的权利。

来源

2011-02-08 void.pointer

使用浮动正是你应该在这里做的。您</body> tag之前

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

：

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

你可能也需要这个。

来源

2011-02-08 05:30:02 awm

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

（不兼容）与表的用户名/密码，你现在有它，在一个单独的TD你的界面控件左TD里面嵌套表取代“LOGGED_IN” DIV在右边。
添加浮动：左表和浮动：左到接口股利和控制它与利润率左

来源

2011-02-08 05:26:34 jerebear

你的div都应该设置为浮动定位：向左;

这根本不算什么，它只是如何让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>

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

来源

2011-02-08 05:29:16 JustinByrne

感谢您的建议。我尝试了float：left（没有清除），我提到它感到hacky，因为当我修改DIV的左边界时，它没有缩进它。我发现这是因为你的边距必须大于表格的宽度，我认为这是破损的。 – 2011-02-08 05:52:17

<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/这对于控制对象对齐非常有用，而且您不必始终依赖表格。

来源

2011-02-08 05:29:38

需要HTML对齐提示

回答

相关问题