在div

Question

这是我的div：

 <div class="PictureContent1" style="display:inline-block" value="1"> </div> 

这是内容：

for(var i = 0; i<ui.item.productpictureurl.length; i++){
                        $('div.PictureContent1').append("<img width='100px' height='100px' src='" + ui.item.productpictureurl[i] + "' />");
                        var radioBtn = '<input type="radio" name="'+ui.item.label+'" data-urlId="'+ui.item.productpictureurl[i]+'" />';
                        $('div.PictureContent1').append(radioBtn);                                  
                    }

我需要在一行中在此div中显示<img>和radiobuttons。任何人都可以帮助我吗？

Answer 1

将此CSS添加到您的HTML中 .PictureContent1 img{ float:left}或将代码更改为

    for(var i = 0; i<ui.item.productpictureurl.length; i++){
$('div.PictureContent1').append("<div style='float:left'>");
                            $('div.PictureContent1').append("<img width='100px' height='100px' src='" + ui.item.productpictureurl[i] + "' />");
                            var radioBtn = '<input type="radio" name="'+ui.item.label+'" data-urlId="'+ui.item.productpictureurl[i]+'" />';
                            $('div.PictureContent1').append(radioBtn); 
$('div.PictureContent1').append("</div>");                                 
                        }

Answer 2

您可以向他们添加float: left来修复您的问题，但之后会出现另一个问题，因为浮动广告不会被清除，因此这些图片后面的代码看起来会有错误。

查看clearing floats。