Flex Direction组件设置

Question

我是有关CSS和HTML设计的新手。我在引导程序设计中使用了flex。 我将flex设置为从左到右对组件进行排序。 就像在this网站上一样。

我想将滑块向右收缩，并在左侧放置另一个组件。我试图在 #GrandCarousel 上删除此行。

element.style {
    /* left: -396.5px; */
}

我怎么做这个功能

Answer 1

在#GrandCarousel div中创建两个div。我们称它们为左侧和右侧。给他们width: 50%;，将#GrandCarousel div的所有当前内容放在右侧。此后，您可能会在滑块内部遇到图像对齐问题。您将不得不根据需要如何调整它们的显示方式。请参阅下面的HTML，CSS代码以更好地理解。

HTML

 <div id="GrandCarousel" class="banner-container">
    <div class="left-section">

         // Left section contents

    </div>
    <div class="right=section">
        // Move GrandCarousel contents to here
    </div>
 </div>

CSS

 .banner-container {
     display: flex;
 }

 .left-section,
 .right-section {
     width: 50vw;
 }

 .right-section {
     position: relative; // To contain all carousel contents inside right-section
 }