0

ニュース セクションがあり、その左側に 1 つの大きな 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);

結果は問題ありませんが、反応が悪く、左側が小さすぎる場合はバグです。ここで助けを求めてください:(

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 に答える