Question

我正在制作一个页面，其中左侧内容，右侧div中的广告。左侧div的高度未知。我想在右侧添加尽可能多的商业div，而不是让右侧的高度高于左侧。

我已将右侧div高度设置为等于左侧高度，然后我在右侧div添加了overflow: hidden，以便商业div被切断。我不希望我的商业div被切断，所以我想删除正在切断的那个。

Answer 1

这样的事情应该做的事情。

＆＃13;

 $(document).ready(function() {
   $(".right_side").css("height", $(".left_side").height());
   var j =  $(".right_side").children("div").length;
   
   for (var i = 1; i < j; i++) {
       if ((($('.right_side').offset().top + $(".right_side").height()) - ($('.right_side div:last-child').offset().top + $(".right_side div:last-child").height())) < 0) {
   	    $(".right_side div:last-child").remove();
       } else {
            break;
       }
   }
 });

＆＃13;

div.left_side {
  display: inline-block;
}

div.right_side {
  display: inline-block;
  float: right;
  overflow: hidden;
}

div.left_side_content {
  height: 30px;
  margin-top: 10px;
  background-color: green;
}

div.commercials {
  height: 50px;
  margin-top: 10px;
  background-color: forestgreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" style ="width: 430px; background-color: lightblue;   padding: 5px;">

  <div class="left_side" style ="width: 200px; background-color: tomato;           padding: 5px;">
    <div class="left_side_content">content</div>
    <div class="left_side_content">content</div>
  </div>
  
  <div class="right_side" style ="width: 200px; background-color: orange;           padding: 5px;">
    <div class="commercials">commercials</div>
    <div class="commercials">commercials</div>
    <div class="commercials">commercials</div>
    <div class="commercials">commercials</div>
    <div class="commercials">commercials</div>
    <div class="commercials">commercials</div>
  </div>
  
</div>

＆＃13;

Answer 2

你可以尝试下面的代码，这将删除所有那些正在被截止的商业广告DIV：

$(document).ready(function() {
   $(".right_side").css("height", $(".left_side").height());
   $commercialDivs = $(".right_side").children("div.commercials");
   $rightSideDivHeight = $(".right_side").height();
   $tempHeight = 0;
   for(var i=0;i<$commercialDivs.length;i++){
        $tempHeight += $commercialDivs[i].clientHeight;
    if($tempHeight>$rightSideDivHeight){
        $commercialDivs[i].remove();
    }
   }   
 });

如果被隐藏溢出的父元素“剪切”，则删除子元素

2 个答案: