为什么在动态pic添加到div之后，div不会浮动？

Question

我有两个div并排，但是当我为每个人添加pic时，第二个div会下降。 这是一个移动应用程序（使用PG）。 div看起来像这样：

 <div data-role="controlgroup" data-type="horizontal" style="text-align:center; width:100%">
        <div id="ph" style="float:left;">   </div>
        <div id="UploadedPic" style="float:left;"> </div>
    </div>

第一张照片添加在JS代码中：

第二张照片是在另一个事件之后在JS代码中添加的：

 document.getElementById('UploadedPic').innerHTML = "<img src='" + path + imageName + ".jpg'/>";

这两张照片的宽度都是90％。

当我将2张照片放入常规HTML代码中时，它们可以在同一行中使用。但动态地显示下面的第二个。

帮助？ 感谢..

我的意思是：

<style>
img{
width:90%
}
</style>

Answer 1

如果将图片的宽度设置为自动会发生什么？

<div data-role="controlgroup" data-type="horizontal" style="text-align:center; width:100%"> <div id="ph" style="float:left; width:auto;"> </div> <div id="UploadedPic" style="float:left; width:auto;"> </div> </div>

或两者都是50％宽度？

<div data-role="controlgroup" data-type="horizontal" style="text-align:center; width:100%"> <div id="ph" style="float:left; width:50%;"> </div> <div id="UploadedPic" style="float:left; width:50%;"> </div> </div>

Answer 2

使用float div#ph＆amp; div#UploadedPic必须有一个固定的width

<div data-role="controlgroup" data-type="horizontal" style="text-align: center; width: 100%">
    <div id="ph" style="float: left; width: 40%; overflow: hidden"></div><!--add width & overflow-->
    <div id="UploadedPic" style="float: left; width: 50%; clear: both; overflow: hidden"></div><!--add width, overflow & clear-->
</div>

您也可以使用css display inline block执行此操作。