在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">
,在一起和分开,但它们似乎结合得不好。
我做错了什么?
最佳答案
右侧不用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>
关于html - 基本 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3851968/