javascript - 动态创建的 div 没有彼此相邻显示

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

如果您仍然遇到问题，请创建一个可用的代码笔，以便我们可以看到您遇到的问题。

此外，使用 display: inline-block 和 float: left; 是不必要的；使用 float 时，inline-block 将没有任何效果。