Javascript 如何使两边动态相等？一个大div和一些小div

我有新闻部分，在它的左侧有一个大的div（主要文章），在右侧有一些小div（子节）。我需要让他们在道义上平等（双方都应该平等）

所以我试着用jquery来实现，我做了一部分，但是有一些非常大的错误。如果左侧太小，则右侧文章将太小，文本将溢出容器

以下是HTML：

<div class="row">
    <div class="col-md-6">
        <article class="article-main_pg main-article article-main_pg--1">
            <!-- image and text -->
        </article>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="row">

        <!-- this four times -->

            <div class="col-lg-6">
               <article class="article-main_pg main-article article-main_pg--1">
                <!-- image and text -->
                </article>
            </div>

         <!-- this four times end -->

        </div>
    </div>
</div>

---

结果是可以的，但它没有响应，如果左侧太小，这是一个错误。请在此处寻求帮助：（

试试这个，这可能会对您有所帮助。如果不是这样，请告诉我。复制、粘贴、运行和检查这是您想要的

悬停
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
主分区{
宽度：98%；
利润率：1%；
利润率最高：5%；
边框：1px纯红；
高度：600px；
}
主分区{
浮动：左；
}
缅因区{
宽度：45%；
身高：90%；
边框：1px实心橙色；
利润率：2.5%；
}
第二分区{
身高：90%；
宽度：45%；
边框：1px纯绿色；
利润率：2%；
利润率最高：2.5%；
}
二区{
宽度：40%；
身高：40%；
边框：1px纯蓝色；
利润率：4.5%；
}
分区说明{
宽度：100%；
身高：59%；
背景颜色：粉红色；
}

你应该看看

flexbox

！这是一个CSS属性，谢谢，我知道我可以尝试使用flexbox制作，但是如果我找不到其他合适的解决方案，我会尝试使用它（实际上我还不知道如何在这个硬引导网格中正确实现它）你会考虑把你的文章和子艺术放进一个有类行的div中，然后在其中添加2个div，每一个都用CY-XX-6类（用2个COLL占用整个行）。然后把你的文章放在左边的div上。右边的div，放在另一个div中，用垂直对齐的顶行。在里面，再放入2个div。（子艺术各一个）每个col-xx-6类……您可能需要两行，最大高度为父分区的50%（加上您想要的任何边距）。我想您会明白要点的。

// news section fix height

// get left news article height (without margin)
var leftArtHeight = $('.s10-news .main-article').outerHeight(false);

// reduce it by half and decrease by right side subarticles margin then add half of the margin (as we need to remember about 2 bottom subarticles margin)

// 25 is the margin (i know it, but ofcourse it can be set from DOM)

var heightForRightSubArt = (leftArtHeight / 2) - 25 + 13;

//finaly we set calculated height to the right subarticles and both sides are equal
$('.s10-news .sub-article').css("height" , heightForRightSubArt);