Question

我有一个包含flash和图像的div，我希望它们显示为内联，并希望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中，并将其向右浮动。我把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>

Answer 2

你可以像pixeline那样说，或者让两个元素都向左浮动。

如何让内容自动占用div的剩余宽度？

2 个答案: