html - 基本 CSS 问题

Question

在CSS中，如何实现如下布局？

xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx

xR2.1x   xxxxxxxxxR2.1xxxxxx
xR2.1x   xxxxxxxxxR2.2xxxxxx
xR2.1x   xxxxxxxxxR2.2xxxxxx

xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx

R2.1是我想往左边的图片，R2.2是我想往右边的div。

如果 R2.2 是一个段落，那会很简单 - 我可以使用 float:left在 R2.1 上——但它是一个 div 的事实似乎把事情搞砸了。

我试过使用 <img style="float:left;">和 <div style="float:right"> ，在一起和分开，但它们似乎结合得不好。

我做错了什么？

Answer 1

右侧不用float:right，只用float:left和margin:

<div>r1</div>
<img style="float:left; width:50px; height:50px;" title="r2.1" />
<div style="margin-left:50px;">r2.2</div>
<div style="clear:both;">r3</div>​