时间戳

首页 > 解决方案 > 当右 div 没有内容时，左 div 宽度增加 100%

javascript - 当右 div 没有内容时，左 div 宽度增加 100%

问题描述

我有 2 个 div 都是 50% 的宽度，如果右边的 div 没有内容，那么左边的 div 宽度应该是 100%。

if ($('.wrap .box2').is(':empty')) {
  $('.box2').hide();
  $('.wrap .box1').css({
    "width": "100%"
  });
}
.wrap {
  width: 100%;
}

.wrap .box1 {
  width: 50%;
  float: left;
  background: red;
}

.wrap .box2 {
  width: 50%;
  float: left;
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="box1">
    <h1>Hello 1</h1>
  </div>
  <div class="box2">
    <h1>Hello 2</h1>
  </div>
</div>

所以如果 .box2 在 h1 中没有文本，那么我想要的是左 div 宽度应该是 100%

标签： javascriptjquerycss

解决方案

if ($('.wrap .box2 h1').is(':empty')) {
  $('.box2').hide();
  $('.wrap .box1').css({
    "width": "100%"
  });
}
.wrap {
  width: 100%;
}

.wrap .box1 {
  width: 50%;
  float: left;
  background: red;
}

.wrap .box2 {
  width: 50%;
  float: left;
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="box1">
    <h1>Hello 1</h1>
  </div>
  <div class="box2">
    <h1></h1>
  </div>
</div>

我刚刚运行了这段代码，左边的 div 占据了整个空间

推荐阅读