Question

我正在动态创建div，我希望它们彼此相邻。我有以下代码，在应用样式后（第5行），它们一直显示其中一个。请帮忙。

rmc.onstream = function (e) {
    if (e.isVideo) {
        var uibox = document.createElement("div");
        uibox.appendChild(document.createTextNode(e.userid));
        uibox.className = "userid";
        uibox.id = "uibox-" + e.userid;
        uibox.style.cssText = 'display: inline-block; float: left';
        document.getElementById('video-container').appendChild(e.mediaElement);
        document.getElementById('video-container').appendChild(uibox);
    } else if (e.isAudio) {
        document.getElementById('video-container').appendChild(e.mediaElement);
    }
    else if (e.isScreen) {
        $('#cotools-panel iframe').hide();
        $('#cotools-panel video').remove();
        document.getElementById('cotools-panel').appendChild(e.mediaElement);
    }

};

Answer 1

您的样式仅适用于uibox，您还需要将它们应用于emediaElement：

if (e.isVideo) {
        var uibox = document.createElement("div");
        uibox.appendChild(document.createTextNode(e.userid));
        uibox.className = "userid";
        uibox.id = "uibox-" + e.userid;
        uibox.style.cssText = 'float: left; width: 50%';
        e.mediaElement.style.cssText = 'float: left; width: 50%';
        document.getElementById('video-container').appendChild(e.mediaElement);
        document.getElementById('video-container').appendChild(uibox);
}

这是一支工作笔 - 我不得不修改您的代码，因为我看不到e.mediaElement的来源，但您可以明白这一点：http://jsbin.com/woluneyixa/1/edit?html,css,js,output

如果您仍然遇到问题，请创建一个有效的codepen，以便我们可以看到您遇到的问题。

此外，使用display: inline-block和float: left;是不必要的;使用float时，inline-block无效。

动态创建的div不会彼此相邻显示

1 个答案: