试图让一个div浮动右边jsfiddle包括在内

Question

我使用div在图像周围创建一个框架。我试图让div和它包含图像向右浮动，以便周围的段落环绕它。

链接到jsfiddle：http://jsfiddle.net/0vnfngws/

样式：

.imgframe {
    margin: 12px;
    position: relative;
    display: inline-block;
    padding: 8px;
    border: 1px solid #cbcbcb;
    background: #f7f7f7;
    box-shadow: 2px 2px 5px 0 #e5e5e5;
    -moz-box-shadow: 2px 2px 5px 0 #e5e5e5;
    -webkit-box-shadow: 2px 2px 5px 0 #e5e5e5;
}
.imgframe img {
    margin: 0;
    padding: 8px;
}
.floatright { 
    float: right;
}

HTML：

<p>This is some text here. I want the paragraph to wrap around the image, not to be positioned above and below it.</p>

<div class="imgframe"> <img src="http://www.hdicon.com/wp-content/uploads/2010/06/Firefox_2004_2.png" alt="#" class="floatright" /> </div>

<p>This is some more text here. I want the paragraph to wrap around the image, not to be positioned above and below it.</p>

Answer 1

您需要做的只是将float: right;添加到.imgframe。

.imgframe {
    float: right;
    margin: 12px;
    position: relative;
    display: inline;
    padding: 8px;
    border: 1px solid #cbcbcb;
    background: #f7f7f7;
    box-shadow: 2px 2px 5px 0 #e5e5e5;
    -moz-box-shadow: 2px 2px 5px 0 #e5e5e5;
    -webkit-box-shadow: 2px 2px 5px 0 #e5e5e5;
}

请参阅updated JSFiddle。

Answer 2

两件事：

1. 交换第一个 p 标记和 div 标记的顺序
2. 将 floatright 类从img标记移动到div标记

Answer 3

将类放在包含div上，而不是放在img标记上。您将图像浮动在包含div中。