css - 向右浮动在 IE 中不起作用

Question

我正在尝试将图像向右浮动。这应该很简单。它在 FF 和 Chrome 中看起来不错，但在 IE 中，文本不会环绕图像。我认为这与我赋予段落标签的样式有关。无论如何，我们将不胜感激!

风格:

.story {
    margin: 0 0 0 360px;
    padding-top: 30px;
    padding-left: 30px;
    max-width: 900px;
    width: 75%;
}
.story p {
    line-height: 150%;
    font-size: 20px;

}
.half-embed {
    float: right;
    position:relative;
    margin-right:-100px;
    margin-left:20px;
    display: inline !important;
    clear:both;
}
.imageborder {
    border: 1px solid lightgray;
    padding: 10px;
}

html:

<div class="story">
 <p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>

<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>


<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p>

<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>

<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>

</div>

Answer 1

您正在 float 图像，它位于 display: inline-block 中元素(默认)== <p>

所以 <p>占据视口(viewport)的整个宽度，即使您的图像是 float 的。所以你的文字不能环绕你的图像(使用此处提供的 hTML)，因为你的文字在其他 <p> 中。的:

<p>Now ....</p>
<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p>
<p>...</p>

要让文字环绕图像，您应该这样做:

<p>
  <img src="images/myimage.jpg" class="half-embed imageborder" alt="">
  Now we are engage......//oper that we
</p>

.half-embed {
    float: right;
    margin: 0 0 20px 20px;
    display: block;
}