Css 浮动权利不在IE中工作_Css

Css 浮动权利不在IE中工作

css

Css 浮动权利不在IE中工作,css,Css,我正试图将一个图像浮动到右侧。这应该很简单。它在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%;

我正试图将一个图像浮动到右侧。这应该很简单。它在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:


八十七年前，我们的先辈在这个大陆上建立了一个新的国家，它孕育于自由之中，致力于人人生而平等的主张
现在，我们正在进行一场伟大的内战，考验这个国家，或者任何一个如此构想和献身的国家，是否能够长久存在。我们在那场战争的一个伟大战场上相遇。我们来到这里是为了奉献这片土地的一部分，作为那些为这个国家的生存而献出生命的人们的最后安息之地。我们这样做是完全恰当的

八十七年前，我们的先辈在这个大陆上建立了一个新的国家，它孕育于自由之中，致力于人人生而平等的主张
现在，我们正在进行一场伟大的内战，考验这个国家，或者任何一个如此构想和献身的国家，是否能够长久存在。我们在那场战争的一个伟大战场上相遇。我们来到这里是为了奉献这片土地的一部分，作为那些为这个国家的生存而献出生命的人们的最后安息之地。我们这样做是完全恰当的

您正在设置display:inline。。。不能浮动内联元素

另外，请确保您正在设置doctype。否则，您将在IE中处于怪癖模式

html的第一行应该是：

<!doctype html>

从段落中删除图像。它有自己的块级范围，应该强制其他元素挂在它下面。不确定为什么它不能在不同的浏览器中保持一致，但这就是它应该如何工作的。

您正在浮动一个图像，该图像位于

显示：内联块

元素中（默认情况下）==

因此，

占据了整个静脉端口的宽度，即使您的图像是浮动的。因此，您的文本不能环绕图像（使用此处提供的hTML），因为您的文本位于其他

中：

<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;
}


现在我们正在参与……//oper，我们

.半嵌入{
浮动：对；
利润率：0.20px 20px；
显示：块；
}

马克的答案在我的测试页面上有效，但在我的实际页面上无效，因此缺少了一些东西。然而，总体而言，IE7刚刚被打破。我的float在任何地方都能工作，但在那里，甚至是更高版本的IE。因此，我将简化IE7的页面，并警告观众这一事实。

你能把代码放在JSFIDLE、Plunkr或类似的东西中吗？这行得通吗？实际上，我使用的是IE10，但使用的是IE7标准。为什么图像上有“位置：相对”和“显示：内联！重要”？如果我不使用position-relative，它似乎会在其他浏览器中崩溃。我使用了显示内联，因为我读了几篇文章说这可以解决ie中的浮点问题，但事实并非如此。我删除了显示内联并更改了doctype。仍然没有骰子，但谢谢。它仍然显示为带有doctype的IE7标准吗？哦举起我只是注意到我以前错过的东西。您的图像被包装在p标记中。这在我的测试页面上有效，但在我的实际站点上无效。所以我还是在摆弄。谢谢。但是，如果图像在语义上与段落相关，它应该包含在段落中，它不会改变float的工作方式。将任何类似块/块的level元素向右浮动都会将其从页面的直接流中移除，并强制其位于容器的右侧边缘。除非下一个块级元素具有clear:right或两者，否则它将向上浮动到其左侧。

<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;
}