html - 如何让内容自动占据div的剩余宽度？

Question

我有一个 div，它包含一个 flash 和一个图像，我希望它们内联显示，并希望 flash div 占据容器的其余宽度(图像 div 应该采用图像本身的宽度)。

所以我让闪光灯向左浮动。

<div id=chartcon>
    <div id="chartflash" style="float:left"></div>
    <div id="map"><img src="../example.jpg"></div>
    <div style="clear: both;"></div>
</div>

但它不起作用，图像总是位于 chartflash div 下。

好像chartcon的宽度太大，所以 map div必须放在它下面。

所以我尝试动态计算 chartflash div 的宽度和高度:

var mapWidth = parseInt($('#map img').css('width'));
var mapHeight = parseInt($('#map img').css('height'));
var chartwidth = parseInt(window.screen.width - mapWidth - 70);
$('#chartflash').width(chartwidth);

'70'不确定(我试过很多次)，如果小于70，图片也会显示在chartflash div下。

虽然这个问题是通过动态计算解决的，但我不认为这是一个好主意，我想知道是否有任何css方法可以做到这一点？

Answer 1

我会将图像放在包含 flash 文件的 div 中，并使其正确 float 。 我将 CSS 置于内联状态，以便您在上下文中看到它。

<div id="chartcon">
    <div id="chartflash">
            <div id="map" style="float:right"><img src="../example.jpg"></div>
            <div style="clear: both;"></div>
    </div>
</div>