は、動的に作成のdivは私が水平に行われ続けるためにはJavaScriptを使用して作成したdiv要素のセットを作るためにしようとしています水平

Question

にスクロールしてください。私はこれのための解決策を理解するように見えることはできません。私は基本的にそれが横に追加され続けて、水平にスクロールできるようにする必要があります。現時点では、それらはブラウザウィンドウの端まで作成され、その後は下に作成されます。 .container上

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

使用white-space: nowrapラッピングからインラインアイテムを防ぐために。 display: inline-block; vertical-align: top;に.contentと.sidebarを設定し、単一のラインを維持するためにフロートを削除します。完璧に動作

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>