2009-08-31 9 views
1

以下のHTMLでは、actionBarクラスに浮動小数点数(leftまたはrightのみ)があるときにレイアウトが動作しますが、 divはページ全体に広がり、レイアウトが崩れます。私は本当にこの "構造"を私のページの中心にしたいと思っています。現在、actionBarクラスで指定された "float"を使用すると、左揃えまたは右揃えになります。誰かがそれをなぜ私に説明することができますか(「すべてが乱れてしまった」という部分)?divを使ったレイアウトは、それ以外の場合を除いて左または右に浮かれば動作しません

もちろん、相対的なHTML新人で、同じレイアウトを達成するための他の素晴らしい方法があれば、それはいつでも歓迎します。今のところ、説明を探していますので、解決策を試すことができます。

注:醜い緑色と青色と赤色は説明のためのものです。実際のHTMLでは、イメージを使用して丸みを帯びたコーナータイプのエフェクトを提供し、基本的にはボタンの集合です。

ありがとうございます!

<html> 
<head> 
<style> 
.actionButtonLeft { 
    padding: 0; margin: 0; margin-right: 1; 
    float : left; 
    width : 8px; height : 26px; 
    background-color: green; 
} 
.actionButton { 
    padding: 0; margin: 0; margin-right: 1; 
    background-color : blue; color : #ffffff ;   
    height : 26px; 
    float : left; 
} 
.actionButtonRight { 
    padding: 0; margin: 0; 
    float : left; 
    width : 8px; height : 26px; 
    background-color: green; 
} 
.actionBar { 
    float:left; /* or float: right; -- doesn't work with no float */ 
    background-color:#112554; 
    border: 2px solid red; 
} 
</style> 
</head> 
<body> 
<div class="actionBar"> 
<div class="actionButtonLeft" ></div> 
<input type="button" value="OK" name="OK" id="okButton" class="actionButton" 
     style="WIDTH:100px; " onclick="doSomething();"> 
<input type="button" value="Cancel" name="Cancel" id="cancelButton" 
     class="actionButton" 
     style="WIDTH: 100px" onclick="cancelThis();"> 
<input type="button" value="Help" name="Help" id="helpButton" 
     class="actionButton" 
     style="WIDTH: 100px" onclick="helpMe();"> 
<div class="actionButtonRight"></div> 
<div style="width:0px;clear:right;"></div></div> 
</body> 
</html> 

答えて

3

浮動小数点要素が含まれている要素を引き伸ばすことがないためです。 actionBar div内の要素はフローティングされているため、floatプロパティのないactionBar divには、その高さを定義するものがありません。 Divsはデフォルトで利用可能な幅全体を占めています。その場合、あなたの場合、他の要素が突き出ている幅の広い薄いボックスが発生します。 floatプロパティを追加すると、actionBar divがその内容を水平方向と垂直方向の両方に含むようにストレッチされます。ここで

フロート特性を説明するカップルの記事があり、それがどのように働くか:

1

はフロートの取り外しと追加actionBarスタイルのクラスの幅はトリックを行う必要があります。約327px(境界を削除すると変更される可能性があります)の幅のように見えます。

+0

GAppleはあなたの質問に実際に答えます(彼/彼女の+1)。私の「答え」は「解決策を試して見つけることができる」という方向に向けられています。 –

+0

はい、私は約327(境界線付き)の幅を追加することは、ちょっとした作品を投稿した後に通知しました。もちろん、私はそこに2〜4つのボタンがあるかもしれないので、私はそれをすることはできません。だから今私は、固定幅または浮動小数点を使用せずに、親のdivを子供をシュリンクラップさせる方法を探しています。私は分幅を試みたが、それはそれをするように見えなかった。 – Adnan

関連する問題