如何并排对齐画布和 div 元素

Question

我有一个画布和一个 div 元素，我想以 60% 到 40% 的比例拆分它们。到目前为止，我对显示所做的任何更改都确保首先显示 div，然后显示画布。

并且 Div 元素的按钮具有画布元素的颜色变化属性。

<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%;
}

我期望的是画布和 div 的高度和宽度相同，但并排。

| Canvas        |     Div  |
|               |          |
|               |          |

问题 1：如何正确对齐？

问题2：这只能通过将画布包装成一个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%;

但是，每次调整窗口大小时，您可能必须更新 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元素

输出：

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