我無法在三個居中的 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;
}

我嘗試了一堆 flex 方法和定位方法，但它們似乎都不起作用。

div 的外觀示例

Answer 1

這應該適用於您正在嘗試做的事情。 如果我正確地設想了您想要的布局。 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>

Answer 2

你設置position: absolute; 對於帶有 class .canvasLeft但其父級不是相對的 div...設置position: relative; 對於帶有 class .container的 div，還將寬度和高度.canvasLeft設置為 100%，“繼承”在position: absolute;