我无法在居中的三个 div 旁边得到一个 div

Question

我正在尝试将包含 p5.js 脚本的 div 放在居中的 3 个 div 的左侧。

这是我针对特定部分的 HTML：

 <div class = "container">
        <div class = "canvasLeft">
            <script src = "sketch2.js"></script>
        </div>

        <div class = "logo">
            <img src = "Img/BarberLogo.png" width = "300px" />
        </div>

        <div class = "comics">
            <a href = "C:/MRT page/Barber Sauce Comics.pdf">comics</a>
        </div>

        <div class = "frontCover">
            <a href = "C:/MRT page/Barber Sauce Comics.pdf">
                <img src = "Img/FrontCover1.png"/ width = "200px"/>
            </a>
        </div>
    </div>

这里是 CSS:

.container{
    position:relative;
}

.canvasLeft{
    top: 0px;
    position: absolute;
    left: 100%;
    width: 100%;
    height: 100%;

}

.logo{
    position: relative;
    text-align:center;
    padding-top: 100px;
}

.comics{
    text-align: center;
    padding-top: 10px;
}

.frontCover{
    text-align:center;
}

我已经尝试了很多弹性方法和定位方法，但其中 none 似乎有效。

example of how the divs should look

Answer 1

你用 class .canvasLeft 为 div 设置了 position: absolute; 但它的父级不是相对的...为 [=21= 设置了 position: relative; ] 使用 class .container，同时将宽度和高度 .canvasLeft 设置为 100%，"inherit" 在 position: absolute;

中不起作用

Answer 2

这应该适用于您正在尝试做的事情。如果我正确地设想了您想要的布局。 https://jsfiddle.net/wjcz3k6x/

我将居中的 div 放在它们自己的包装器中，而将 canvas 放在外面。然后在容器上使用 display flex 让它们并排放置。您可以根据自己的口味调整宽度。

.container {
  display: flex;
}

.canvasLeft{
    background: blue;
    height: 300px;
    width: 40%;
}

.content-wrapper {
  flex: 60%;
  background: red;
}

.logo{
    position: relative;
    text-align:center;
    padding-top: 100px;
}

.comics{
    text-align: center;
    padding-top: 10px;
}

.frontCover{
    text-align:center;
}

 <div class = "container">
   <div class = "canvasLeft">
     <script src = "sketch2.js"></script>
   </div>

   <div class="content-wrapper">
      <div class = "logo">
            <img src = "Img/BarberLogo.png" width = "300px" />
        </div>

        <div class = "comics">
            <a href = "C:/MRT page/Barber Sauce Comics.pdf">comics</a>
        </div>

        <div class = "frontCover">
            <a href = "C:/MRT page/Barber Sauce Comics.pdf">
                <img src = "Img/FrontCover1.png"/ width = "200px">
            </a>
        </div>
   </div>
</div>

我无法在居中的三个 div 旁边得到一个 div

I can't get a div next to three divs that are centered

html

css

p5.js