HTML-將滑塊放在畫布旁邊

-2

有一種方法可將滑塊和按鈕放在畫布旁邊？我嘗試了<div>風格，但它將滑塊移動到頁面頂部或頁面底部。這是我的HTML代碼：HTML-將滑塊放在畫布旁邊

<body> 
    <div style="margin: 0px auto; width: 512px;"> 
     <h1>Model of a Robot</h1> 
     <div style="margin-top: 30px; margin-bottom: 30px;"> 
     <canvas id="gl-canvas" width="512" height="512"> 
      Oops ... your browser doesn't support the HTML5 canvas element 
     </canvas> 
    <button id= "switchProj">Change Projection type</button> 
    <div> 
     body angle -180 <input id="bodySlider" type="range" 
     min="-180" max="180" step="10" value="0" 
     /> 
     180 
    </div> 
    <div> 
     head angle -45 <input id="headSlider" type="range" 
     min="-45" max="45" step="5" value="0" 
     /> 
     45 
    </div> 
    <div id="leftArmSlider"> 
     left arm angle -90 <input id="leftArmSlider" type="range" 
     min="-90" max="-30" step="10" value="-30" 
     /> 
     -30 
    </div> 
    <div id="rightArmSlider"> 
     right arm angle 30 <input id="rightArmSlider" type="range" 
     min="30" max="90" step="10" value="30" 
     /> 
     90 
    </div> 
    <div> 
     left leg angle -30 <input id="leftLegSlider" type="range" 
     min="-30" max="30" step="5" value="0" 
     /> 
     30 
    </div> 
    <div> 
     right leg angle -30 <input id="rightLegSlider" type="range" 
     min="-30" max="30" step="5" value="0" 
     /> 
     30 
    </div> 
    <div> 
     zNear .01<input id="zNearSlider" type="range" 
     min=".01" max="4" step="0.1" value="0.3" /> 
     4 
    </div> 
    <div> 
     zFar 1<input id="zFarSlider" type="range" 
     min="1" max="10" step="1.0" value="5" /> 
     10 
    </div> 
    <div> 
     fov 10<input id="fovSlider" type="range" 
     min="10" max="120" step="5" value="70" /> 
     120 
    </div> 
    <div> 
     aspect 0.5<input id="aspectSlider" type="range" 
     min="0.5" max="2" step="0.1" value="1" /> 
     2 
    </div> 
</body>

來源

2017-05-23 B.junior

您是否想過將元素放在一行中，然後將滑塊包裹在同一個div中並將它們定義爲機器人元素列旁邊的列？ –

請參閱[這裏]（https://en.wikipedia.org/wiki/Cascading_Style_Sheets） –

也@OP，最好的做法是隻發佈與您面臨的問題相關的代碼，即滑塊的div並且畫布 –

好的OP！首先，如果你不想自己編寫很多CSS，我會建議你使用Bootstrap或類似的東西。這裏有一個建議您使用自舉類：

<body> 
<div class="row"> 
    <div style="margin: 0px auto; width: 512px;" class="col-sm-9"> 
     <h1>Model of a Robot</h1> 
     <div style="margin-top: 30px; margin-bottom: 30px;"> 
      <canvas id="gl-canvas" width="512" height="512"> 
       Oops ... your browser doesn't support the HTML5 canvas element 
      </canvas> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     //sliders and stuff in here 
    </div> 
</div> 
</body>

這是不完美的或任何東西，我懷疑它會爲你的項目工作，沒有調整，但我認爲它可能是你的路徑中，最不抵抗性。

來源

2017-05-23 13:57:49

它將畫布和滑塊移動到兩個不同的列上，但它仍然會將頁面底部的滑塊移動，即使它應該將兩個部分放在同一行上。 –

發生這種情況可能是因爲您明確聲明瞭包含畫布的div的寬度。你可以嘗試刪除'style =「margin：0px auto; width：512px;''你的代碼的一小部分，讓我知道會發生什麼？這樣做後，它可能看起來不太理想，但一旦我們獲得了頁面的整體佈局，我們就可以看起來很漂亮。 –

它將滑塊移動到同一列滑塊上 –

這是網頁的截圖！

來源

2017-05-23 14:24:28

下面的回答裏添加了截圖，你去@R。麥克馬納曼！ –

所以我上面提供的答案只會在安裝了Bootstrap的情況下工作，它不會顯示您已經完成！沒關係，這是一個建議。從這裏，我建議給這個閱讀：https://www.w3schools.com/cssref/css3_pr_columns.asp –

使用它，你應該能夠定義你的代碼的列坐。您應該嘗試使用這些來設置頁面的格式，方法是將包含滑塊的列放在包含畫布的列旁邊。請記住，如果您的畫布有明確的寬度，不足以讓您的滑塊足夠空間，您仍然可以將滑塊包裝到頁面的底部！ –

HTML-將滑塊放在畫布旁邊

回答

相關問題