Flex Direction 组件设置

Question

我是 css 和 html 设计的新手。我在 bootstrap 设计中使用了 flex。我将 flex 设置为从左到右对组件进行排序。正如在 this 网站上一样。

我想将滑块向右收缩并在左侧放置另一个组件。我试图通过 #GrandCarousel.

删除此行

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

我怎样才能实现这个功能

Answer 1

在#GrandCarousel div 中创建两个 div。我们称它们为 left-section 和 right-section。给他们width: 50%;把#GrandCarouseldiv当前所有内容放到right-section。在此之后，您可能会遇到滑块内图像对齐的问题。您必须根据需要它们的显示方式来调整它们。请参阅下面的 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
 }

Flex Direction 组件设置

Flex Direction component settings

html

css

carousel

flexbox