使动态创建的div水平滚动

Question

我想使一组div创建使用javascript继续进行水平。我似乎无法找出解决方案。我基本上需要它继续水平添加，然后能够水平滚动。目前他们被创建到浏览器窗口的边缘，然后在下面。

function makeResponseBox() { 
 
    document.getElementById("calculate").onclick = function() 
 
    { 
 
     var responseBox = document.createElement("DIV"); //create <div> 
 
     responseBox.setAttribute("class", "content"); 
 
     document.getElementById('container').appendChild(responseBox); 
 
    } 
 

 
}//close function (makeResponseBox) 
 

 
window.onload=makeResponseBox;

body { 
 
\t margin: 0 0; 
 
} 
 
#container { 
 
\t border: 1px solid blue; 
 

 
} 
 
#headerbar { 
 
\t font-size: 26px; 
 
\t color: white; 
 
\t padding-left: 10px; 
 
\t border: 1px solid blue; 
 
\t height: 50px; 
 

 
} 
 
#sidebar { 
 
\t color: black; 
 
\t border: 1px solid blue; 
 
\t width: 50px; 
 
\t float: left; 
 
\t height: 100vh; 
 
} 
 
.content { 
 
\t width: 200px; 
 
\t height: 100vh; 
 
\t float: left; 
 
\t display: inline; 
 
\t border: 1px solid blue; 
 
}

<div id='container'> 
 
<div id='headerbar'>Test Div</div> 
 
<div id='sidebar'> <input type="button" value="Calculate" id="calculate" /> 
 
<br /><br /> 
 
<br /><br /> 
 
</div> 
 
<div class='content'>test1</div> 
 

 

 
</div>

Answer 1

在.container使用white-space: nowrap防止包装内嵌项目。设置.content和.sidebar至display: inline-block; vertical-align: top;，取出浮保持单行：

function makeResponseBox() { 
 
    document.getElementById("calculate").onclick = function() { 
 
     var responseBox = document.createElement("DIV"); //create <div> 
 
     responseBox.setAttribute("class", "content"); 
 
     document.getElementById('container').appendChild(responseBox); 
 
    } 
 

 
    } //close function (makeResponseBox) 
 

 
window.onload = makeResponseBox;

body { 
 
    margin: 0 0; 
 
} 
 
#container { 
 
    border: 1px solid blue; 
 
    white-space: nowrap; /*** prevent the divs from wrapping to the next lines ***/ 
 
    overflow: auto; /** resize the container with the added content **/ 
 
    font-size: 0; /** remove spaces between inline-block elements **/ 
 
} 
 

 
#container > * { 
 
    font-size: 16px; /** set font-size to all direct children of #container **/ 
 
} 
 

 
#headerbar { 
 
    font-size: 26px; 
 
    color: white; 
 
    padding-left: 10px; 
 
    border: 1px solid blue; 
 
    height: 50px; 
 
} 
 
#sidebar { 
 
    display: inline-block; 
 
    color: black; 
 
    border: 1px solid blue; 
 
    width: 50px; 
 
    height: 100vh; 
 
    vertical-align: top; 
 
} 
 
.content { 
 
    display: inline-block; /*** this will make the divs stay on the same line, but still have the attributes of a block element ***/ 
 
    width: 200px; 
 
    height: 100vh; 
 
    border: 1px solid blue; 
 
    margin: 0 5px 0 0; 
 
    vertical-align: top; 
 
}

<div id="container"> 
 
    <div id="headerbar">Test Div</div> 
 
    <div id="sidebar"> 
 
    <input type="button" value="Calculate" id="calculate" /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    </div> 
 
    <div class="content">test1</div> 
 

 

 
</div>