我无法在居中的三个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：

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

}

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

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

.frontCover{
    text-align:center;
}

我已经尝试了很多flex方法和定位方法，但是似乎都不起作用。

Answer 1

您为position: absolute;类的div设置了.canvasLeft，但它的父级不是相对的...对于position: relative;类的div设置了.container，也将宽度和高度.canvasLeft设置为100％，“继承“在position: absolute;]中不起作用