如何並排對齊 canvas 和 div 元素

Question

我有一個 canvas 和一個 div 元素，我想將其拆分為 60% 到 40% 的比例。 到目前為止，我對顯示所做的任何更改都確保首先顯示 div，然后顯示 canvas。

並且 Div 元素具有對 canvas 元素具有變色屬性的按鈕。

<div id = "ModelArea1">
    <div id = "Model1">
  <canvas id ="scene1" style="width: 100%; height:100%;">
    </canvas>
    </div>
    <div id ="SelectionArea1">
        <button type ="button" class ="ButtonFormat" onclick =displayVariations()>Fabric Textures</button>
        <div class = "FabricTectureOptions" style="display:none;">  
            <div class ="Fabric1">      
            </div>
            <div class ="Fabric2">      
            </div>
        </div>
        <button type ="button" class ="ButtonFormat" onclick =displayVariations()>Leather Textures</button>
    </div>
</div>

.Fabric1{
  background-image: url("https://i.ibb.co/B2kPznR/Fabric-Upholstery-Moss-Plain-Weave001-AO-1-K.jpg");
   height: 50px;
   width: 50px;
   border-radius: 10px;
   display: inline-block;
}
.Fabric2{
  background-image: url("https://i.ibb.co/kKZRpdm/Fabric-Upholstery-Moss-Plain-Weave001-COL-VAR3-1-K.jpg");
   height: 50px;
   width: 50px;
   border-radius: 10px;
   display: inline-block;
}
.ButtonFormat{
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  border-style: none outset outset none;
  outline: none;
  font-size: 12px;
}
.FabricTectureOptions{
  padding: 0 18px;
  overflow: hidden;
  background-color: #f1f1f1;
  border-radius: 10px;
}
#ModelArea1{
  width:100%;
  display:inline-flex;
}
#Model1{
  width: 60%;
}
#SelectionArea1{
  width: 40%;
}

我期望的是 canvas 和 div 的高度和寬度相同，但並排。

| Canvas        |     Div  |
|               |          |
|               |          |

問題1：我如何得到這個alignment 對嗎？

問題2：這只能通過將canvas包裝到一個div中來完成嗎？ 有替代方案嗎？

這是codepen的鏈接： https://codepen.io/FarhaNaseem/pen/eYgKJZW

Answer 1

你可以簡單地做到這一點，它會在一定程度上起作用。

renderer.setSize(window.innerWidth * 0.6, window.innerHeight); // Set the width of the canvas initially to 60%;

但是，每次調整 window 的大小時，您可能必須更新 canvasWidth。 我還通過 JS 創建了一些新容器並將子元素附加到其中。

// Canvas width dynamic resize
window.addEventListener("resize", () => {
   let ratio = 0.6
   let canvasWidth = window.innerWidth * ratio
   renderer.setSize(canvasWidth, window.innerHeight) // You can also manipulate this height by multiplying with the ratio
   camera.aspect = canvasWidth/ window.innerHeight
   camera.updateProjectionMatrix() // Must be called after any change of parameters.
});

// Add elements to the DOM in a wrapper container 
let ModelArea1 = document.querySelector("#ModelArea1")
let container = document.createElement("div")
container.classList.add("container")
document.body.append(container)
container.appendChild(renderer.domElement) // Append canvas to the container
container.appendChild(ModelArea1) // Append 40% area after canvas

這會給你一個更整潔的 DOM 生成：

<div class="container">
  
  <canvas id="scene1" width="726" height="541">
    </canvas>

  <div id="ModelArea1">
    
    <div id="Model1">
    </div>
    
    <div id="SelectionArea1">
      <button type="button" class="ButtonFormat" onclick="displayVariations()">Fabric Textures</button>
      <div class="FabricTectureOptions" style="display:none;">
        <div class="Fabric1">
        </div>
        <div class="Fabric2">
        </div>
      </div>
      <button type="button" class="ButtonFormat" onclick="displayVariations()">Leather Textures</button>
    </div>
    
  </div>
</div>

最后，您可以使用display: flex將容器轉換為 flexbox 元素

Output：

Codepen 演示： https://codepen.io/m4n0/pen/zYNeGVz