我有新闻部分，在它的左侧有一个大的 div(主要文章)，右侧有一些 (4) 个小的 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>
我的 jQuery 尝试
// 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);
结果还可以，但它没有响应，如果左侧太小，这是一个错误。
最佳答案
试试这个，这可能对你有帮助。如果不是这样告诉我。复制、粘贴、运行并检查这是你想要的。
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
div.main{
width: 98%;
margin: 1%;
margin-top: 5%;
border:1px solid red;
height: 600px;
}
div.main div{
float: left;
}
div.mainone{
width: 45%;
height: 90%;
border:1px solid orange;
margin: 2.5%;
}
div.maintwo{
height: 90%;
width: 45%;
border:1px solid green;
margin: 2%;
margin-top: 2.5%;
}
div.maintwo div{
width: 40%;
height: 40%;
border: 1px solid blue;
margin: 4.5%;
}
div.description{
width: 100%;
height: 59%;
background-color: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="mainone">
<img src="" style="width:100%;height:40%;box-shadow:1px 2px 1px black;">
<div class="description"></div>
</div>
<div class="maintwo">
<div class="subone"></div>
<div class="subtwo"></div>
<div class="subthree"></div>
<div class="subfour"></div>
</div>
</div>
</body>
</html>关于javascript - 如何使两侧等高？一个大的 div 和一些小的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35558627/