2011-01-10 70 views
0

我有一个div,其包含闪光灯和图像,我想他们会在线显示,并希望闪光的div将容器的剩余宽度(图像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的宽度太大,所以地图div必须坐在它下面。

所以我试着计算chartflash DIV dynamiclly的宽度和高度:

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下。

虽然问题是由计算dynamiclly sloved,但我不认为这是一个好主意,我不知道是否有任何CSS的方式,使这个?

回答

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> 
0

您可以像pixeline说的那样做,也可以使两个元素左移。