Question

我想让图像移到右侧，文字移到左侧。我正在使用浮动，但我很困惑，所以我删除了代码。我只有HTML代码。您可以查看显示我期望的结果的屏幕截图：http://i.imgur.com/R9aSnmw.jpg

HTML：

<div class="column2">
  <p class="aboutdes">A quem consectetur, ut dolore non varias, nostrud noster qui expetendis eruditionem, culpa mandaremus non senserit. A magna fugiat dolore pariatur, ab quid consectetur et qui dolore litteris an malis commodo id nostrud</p>.                                                            
</div>

Answer 1

只需将<img />元素放在<p>标记内，然后设置以下CSS：

p > img {
    float: right;
    margin: 0 0 10px 10px;
}

jsFiddle Demo

Answer 2

将<img class="right">放在<p>内。使用

img.right { float: right; }
p { text-align: left; }

Answer 3

HTML :(我使用了示例图片）

<div class="column2">
    <img src="http://cdn7.facegfx.com/psd/wp-content/uploads/2013/5/6/hd-magical-picture-book-psd.jpg" />  
    <p class="aboutdes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius in ligula eget bibendum. Nam faucibus lorem quis mattis rhoncus. Phasellus iaculis felis quis massa molestie rutrum. Praesent elit nisi, facilisis vitae sem eget, faucibus imperdiet elit. Mauris mauris arcu, consectetur in consectetur ac, scelerisque sit amet ante. Nulla ac consequat nibh. Nullam congue massa ipsum, nec venenatis augue semper non. Morbi hendrerit turpis est, eget luctus nulla facilisis sed! Praesent non rhoncus ipsum. Pellentesque lacinia scelerisque rutrum? Donec posuere imperdiet ligula, eget tincidunt metus!
</p>.</div>

CSS：

.column2 > img {
    float: right; 
    width:100px; // or 30% or depends upon your requirement!
    border-radius: 50%; // for the rounded image as shown in your example
    margin: 0 0 15px 15px; // spacing from text
}

<强> jsfiddle demo

向左浮动图像，向左浮动文本？

3 个答案: