css - divを含む1つの画像にインラインで表示される2つの画像の横にdivを配置します

Question

次のサイトを検討してください。

女性の写真の横に、幅約300ピクセル、高さ約400ピクセルのdivを配置しようとしています。divをインラインとして表示しようとしましたが、役に立ちませんでした。私は左に浮かせようとしましたが、もう一度運がありませんでした。何かご意見は？

Answer 1

次のCSSを使用して、画像の横に配置できます。

.emailForm {
    width: 260px; /* anything above 260px will fall over to the next line */
    /*float: right;*/ /* remove float */
    display: inline-block; /* inline-block since you want specific width and height */
    height: 434px;
    border: 1px solid black;
}

注：使用していることは確かですが、使用していない場合は、FirebugまたはChrome開発ツールを使用してこのようなタスクを簡単に実行してください。

Answer 2

これを試して、

 <div id="wrap">
 <div id="nextTo"></div>
 <img id="woman" src="#" width="600px" height="400px" />
 </div>

CSS

 #wrap {width: 1000px; margin: 0 auto;}
 #nextTo {float: right; max-height: 400px;}

これにより、画像の幅が固定されます。たとえば、幅が1000pxのラッパーdivがある場合、#nextTodivは画像が占める残りの部分になります（私の例では400px）。

max-heightdivに属性を追加する#nextToと、divが画像の下に落ちないようになりますが、これが目的であるかどうかはわかりません。