Html 我怎样才能向左伸展；“世界其他地区”；左边怎么填？我使用引导 框1 框3 框2 框7 方框4 方框5 第2栏奥雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图尔，阿迪皮塞特精英。在实验室里，我们发现了大量的证据，证明了这是一种巨大的腐败，是一种铜酸劳丹！必要的，不必要的？ .风格{ 背景色：rgb（220222238）； 边框：1px纯黑； }

我需要拉伸盒子（1,2,3,4,5,7），所以盒子1的高度应该是盒子6高度的一半，另外两行盒子3，盒子2，盒子7和盒子4，盒子5各占25%

---

您需要做的是在元素上再设置几个类，以安全地将它们作为目标（

nth-child（）

如果布局保持不变，则可以工作）

因此，我在主要元素中添加了

.left

和

.right

类

然后，将

left

类设置为

flex

父类，其flex方向为

列

然后，我们使用

flex:025%

将所有

行

作为目标，使它们的高度都达到25%。我在第一行添加了一个名为

.half

的类。然后，我们将

flex

属性设置为

flex:050%

，因此它是高度的一半

我创建了一个小版本（使用

col-sm-x

classes），这样您可以在运行代码段时看到它。您的代码在第二个代码段中

.style{
背景色：rgb（220222238）；
边框：1px纯黑；
}
.左{
显示器：flex；
弯曲方向：立柱；
}
.行{
弹性：0.25%；
}
.一排半{
弹性：0.50%；
}

框1
框3
框2
框7
方框4
方框5
第2栏奥雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图尔，阿迪皮塞特精英。在实验室里，我们发现了大量的证据，证明了这是一种巨大的腐败，是一种铜酸劳丹！必要的，不必要的？

是否可以使用flexbox？

<div class="container-fluid">
        <div class="row">
            <!-- Left side -->
            <div class="col-xl-10 style">
                <div class="row" >
                    <div class="col-xl-12 style">Box1</div>
                </div>
                <div class="row" >
                    <div class="col-xl-6 style">Box3</div>
                    <div class="col-xl-4 style">Box2</div>
                    <div class="col-xl-2 style">Box7</div>
                </div>
                <div class="row">
                    <div class="col-xl-3 style">Box4</div>
                    <div class="col-xl-9 style">Box5</div>
                </div>
            </div>
            <!-- Right side -->
            <div class="col-xl-2 style">Box 2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem iure sed recusandae hic laborum, quae earum doloremque illo alias explicabo rerum sequi corrupti magnam, ipsam laudantium cupiditate! Necessitatibus, aliquam eaque?</div>
        </div>
    </div> 

.style{
    background-color: rgb(220, 222, 238);
    border: 1px solid black; 
}