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是一个段落，那将很容易 - 我可以在R2.1上使用float:left - 但事实上它是一个div似乎搞砸了。

我已经尝试过使用<img style="float:left;">和<div style="float:right">，但它们似乎并没有很好地结合使用。

我做错了什么？

Answer 1

有没有理由你不能把图像放在第二个div中？这样可以解决这个问题：

<div id="r1" style="height:100px; background-color:#eff;">r1r1r1r1r1r1r1r1r1r1</div>
<div id="r2" style="height:100px; background-color:#efe;">r2r2r2r2r2r2r2r2r2r2
   <div id="image" style="width:160px;height:100px;background-color:#ff8;float:left">
   </div>
</div>
<div id="r3" style="height:100px; background-color:#fee;">r3r3r3r3r3r3r3r3r3r3</div>

http://jsfiddle.net/WP6bc/1/

Answer 2

没有必要使用float：右侧，只需使用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>

Answer 3

尝试：

<div style="margin-left: [width of picture]">

Answer 4

浮动应该按预期工作。确保向R3 div添加clear:both，因此它知道它应该从浮动div下面开始，并且左/右div具有正确的宽度，因此它们不会被推到新的行。例如：

<div>r1</div>
<img style="float:left;" alt="r2.1" />
<div style="float:right;">r2.2</div>
<div style="clear:both;">r3</div>

http://jsfiddle.net/wHm8n/

基本的CSS问题

4 个答案: