个人中心
gpt4 book ai didi

javascript - 如何使两侧等高？一个大的 div 和一些小的 div

转载 作者：行者123 更新时间：2023-11-28 06:21:37 25 4
gpt4 key购买 nike

我有新闻部分，在它的左侧有一个大的 div(主要文章)，右侧有一些 (4) 个小的 div(子文章)。我需要使它们动态相等(两边在视觉上应该相等):

enter image description here

我尝试用 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/

25 4 0
文章推荐： ios - 如何在 UICollectionView 中画一条线？
文章推荐： swift - 访问内部类变量
文章推荐： swift - 在内联条件语句中解包可选
文章推荐： javascript - Bootstrap-datepicker 如何将日期放入输入字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com