0

我有新闻部分，左侧有一个大 div（主文章），右侧有一些（4）个小 div（子文章）。我需要使它们在动态上相等（双方应该在视觉上相等）

在此处输入图像描述

所以我尝试用 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);

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

4

1 回答 1

0

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

<!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>

于 2016-02-22T17:01:57.063 回答