需要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對齊提示

回答

相關問題