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

フロートの使用はここで行う必要があります。

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

あなたはおそらくも、この必要があります右のあなたの</body>タグの前に

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

を。

出典

2011-02-08 05:30:02 awm

レイアウトの完全な範囲はわかりませんが、たくさんのオプションがあります。ここでは2つです：

（準拠していない）あなたは現在、別のTDで、あなたのインターフェイスコントロールを持っているとして残しTD内部のネストした表のようにユーザー名/パスワードを持つテーブルで「LOGGED_IN」のdivを交換します右側に。
はfloatを追加：テーブルとfloatに左：インタフェースのdivに委ね、あなたのdivの両方が浮くように設定する必要がありますマージン左

出典

2011-02-08 05:26:34 jerebear

と位置決めのコントロール：左;

これはまったくハックされていません。divを互いに隣り合わせに表示する方法です（表示：インラインでも動作する可能性があります）。ただし、ブロックをクリアする必要があります（class = FLは」floatを意味：左とクラス= 'FF' を明確に意味：両方;）：

<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

ありがとうございます。私はフロートを試みました：左（クリアなし）と私はDIVの左マージンを変更したときにそれがインデントされなかったので、それがハッキリと感じたと言いました。私はあなたのマージンがテーブルの幅よりも大きくなければならないことを知りました。 –

<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アライメントのヒントが必要

答えて

関連する問題