2枚の浮遊画像間のDIVのサイズが正しくない

Question

デザイナーが作成したカスタム画像を使用してダイアログボックスを作成する必要があります。この議論の目的のために、これは私のアプリケーションの正解です。ダイアログボックスは、幅と高さの変化に耐えられる必要があります。これはテーブルでは簡単ですが、テーブルレス設計を維持したいので、3行のDIVを使用してこれを行うことができると考えました。たとえば、イメージを左に浮動させ、イメージを右に浮動させ、テキストをその上に入力できるように、イメージを背景に設定してDIVをその間に配置します。ここで

がこれを行うには、私の失敗した試みのデモです：あなたが見ることができるように、これはほとんどの作業 http://www.seaburydesign.com/rounded/demo.html

（1行のみが示さ）。しかし、中央のDIVは、高さと幅を設定していても、その内部のコンテンツのサイズにすぎません。私は幅を柔軟に保つ必要があります。

これを修正する方法についてのご意見はありますか？

Answer 1

イメージの丸みのある角を透明ではなく白くする場合は、中央のdivではなく、header-tagに背景イメージを適用できます。これは、中間のdivが両方の画像と同じ高さを持っているという印象を作り出します。

更新

（あなたがサポートする必要があるブラウザ内容に応じて）可能な場合は、代わりに画像を使用するのでは、CSS3のボーダー-radiusプロパティで角丸を行うことができます。

header { 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
} 

あなたはまた、最高のあなたに合う性質を見つけるために、このborder-radius CSS-generatorを試みることができる：それはようなものになるだろう。

Answer 2

コンテナ内のdisplay: inlinedivの空白はすべてwidthの設定です。 divにはdisplay: block; float: left; margin: 0 XXpx;を使用してください（XXは画像の横幅です）。

編集： 具体的には、これは次のようになります。

div#yourdiv { 
    background-image: url("images/module_header_bg.jpg"); 
    color: white; 
    display: block; 
    float: left; 
    font-weight: bold; 
    height: 42px; 
    width: auto; 
} 

と両方のimgタグ

img { 
    float: left; 
} 

これはあなたのコンテンツの動的なサイズのボックスを作成、またはあなたがdiv要素の幅を設定具体的な値はwidth: autoではなくwidth: 300pxです。

Answer 3

次の行を削除：

表示：インライン。

"インライン"プロパティでは、要素の幅や高さを設定できません。この場合、インラインビヘイビアは既に動作しています。明確な理解のために、w3c's articleとお読みください。