HTML

Question

我有以下容器同时包含图像和文本元素。

<div class="container">
    <img id="image" src="http://dummyimage.com/200">
    <span class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </span>
</div>

所需的行为是div应该换行到图像的宽度，然后将文本正确地包裹在下面。这也需要灵活，因为内容是动态的，并且图像宽度不是预先知道的。

您可以使用min-content在Firefox和Chrome中完美地完成此操作。

.container {
    /*Other style stuff up here*/
    width: -moz-min-content;
    width: -webkit-min-content;
}

Jsfiddle of above - works perfectly in FF and Chrome.

我的问题： Internet Explorer没有min-content（或我可以找到的等效内容），这意味着文本不是决定容器宽度的图像。

在Internet Explorer中是否有同样优雅的方法来实现这一目标？

如果不是，我怎样才能重构html / css以允许相同行为的交叉更加相容？

Answer 1

正如其他人所提到的，您可以使用-ms-grid-columns。您只需使用仅IE的CSS在内容周围添加div。对于其他浏览器，CSS被忽略，不应该影响你的布局（除非你将CSS应用于所有div元素，如填充/边距，在这种情况下停止这样做）。

HTML

<div id="stupidIE">
    <div class="container">
        <img id="image" src="http://dummyimage.com/200" alt="">
        <span class="text">
            Cupcake ipsum dolor sit. 
            Amet chocolate carrot cake oat cake bear claw croissant.
        </span>
    </div>
</div>

CSS

.container 
{
    background-color: #EEEEEE;
    border: 1px solid #888888;
    padding: 0.3em;
    width: -moz-min-content;
    width: -webkit-min-content;
}
#stupidIE
{
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

这是JSFiddle：http://jsfiddle.net/LRYSp/

在Chrome和IE11中测试过。但它应该在其他浏览器中工作。但是我不认为它会在IE9及以下版本中正确呈现。

Answer 2

上面的解决方案缺乏一个额外的div，它是一个块元素并跨越整个宽度，而原始宽度：min-content没有这个缺陷。它可以修复：

HTML :(完整）

<div class="container">
    <img id="image" src="http://dummyimage.com/200" alt="">
    <span class="text">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </span>
</div>

CSS：

.container {
    background-color: #EEEEEE;
    border: 1px solid #888888;
    padding: 0.3em;
    width: -moz-min-content;
    width: -webkit-min-content;
    display: -ms-inline-grid;
    -ms-grid-columns: min-content;
}
.container > span:nth-child(2) 
{
    -ms-grid-row:2;
    display:inline-block;
}

http://jsfiddle.net/L28s7txr/

Answer 3

有点jquery？

$(function() {
    $('.container').width($('img#image').width());
});

<强> FIDDLE

IE元素宽度为min-content

3 个答案:

HTML

CSS