Я не могу получить div рядом с тремя div по центру - PullRequest
Новая
       23

Я не могу получить div рядом с тремя div по центру

1 голос
/ 04 мая 2020

Я пытаюсь разместить div, содержащий скрипт p5.js, слева от 3 div, которые центрированы.

Вот мой HTML для указанного раздела c: 

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

Я пробовал куча гибких методов и методов позиционирования, но ни один из них не работает.

пример того, как div должен выглядеть

Ответы [ 2 ]

2 голосов
/ 05 мая 2020

Это должно работать на то, что вы пытаетесь сделать. Если я правильно представляю нужный вам макет. https://jsfiddle.net/wjcz3k6x/

Я поместил центрированные делители в их собственную обертку и оставил холст из нее. Затем используйте дисплей 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>
0 голосов
/ 04 мая 2020

вы устанавливаете position: absolute; для div с классом .canvasLeft, но его родитель не является относительным ... установите position: relative; для div с классом .container, также установите ширину и высоту .canvasLeft на 100%, " наследовать "не работает в position: absolute;

...