css - 试图让一个 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 .