如何使双方动态相等?一个大div和一些小div

时间:2016-02-22 16:20:02

标签: javascript jquery html css equal-heights

我有新闻栏目,在左侧有一个大的div(主文章)在右侧有一些(4)小div(子文章)。我需要让它们在音速上相等(双方应该是相同的)

enter image description here

所以我试着通过jquery制作,我部分地做了这个,但有一些非常大的BUG。如果左侧太小,右侧文章太小而文本会溢出容器

这是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);

结果还可以,但它没有响应,如果左侧太小,它就是一个错误。在这里寻求帮助:(

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;