javascript - 根据 child 的宽度设置div的宽度

Question

Fiddle Example

我们需要“蓝色部分”与 child 的文字一样宽。也就是说，父容器 m-leading-taglines 必须根据子容器动态调整大小。

jQuery(document).ready(function() {
  function run() {
    var prev = jQuery(".m-leading-taglines .m-leading-tag:first-child");
    jQuery.unique(prev).each(function(up) {
      jQuery(this).delay(up * 600).slideUp(function() {
        jQuery(this).appendTo(this.parentNode).slideDown();
      });
    });
  };

  function active() {
    jQuery('.m-leading-taglines').removeClass('active').delay(1000).queue(function() {
      jQuery(this).addClass('active').dequeue();
    });
  }


  var intRun = window.setInterval(run, 4000);

  jQuery('.m-partner-display').on('mouseenter', function() {
    clearInterval(intRun);
  }).on('mouseleave', function() {
    intRun = window.setInterval(run, 4000);
  });

  var intAct = window.setInterval(active, 4000);

  jQuery('.m-partner-display').on('mouseenter', function() {
    clearInterval(intAct);
  }).on('mouseleave', function() {
    intAct = window.setInterval(active, 4000);
  });
  


})

#m-main-display {
    height: 100vh;
}
.m-logo-display > img {
    margin: 0 auto;
}
.m-partner-display {
    font-size: 1.5rem;
    font-weight: 200;
    height: 50px;
    overflow: hidden;
}
.m-leading-taglines {
    color: #fff;
    display: inline-block;
    height: 25px;
    overflow: hidden;
    padding: 0;
    transition: width 500ms ease-in 0s;
    width: 0;
}
.m-leading-taglines.active {
    background-color: #12a5e5;
    transition: width 500ms ease-in 0s;
    
}


*::before,
*::after {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

.text-right {
  text-align: right;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  float: left;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}

* {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="m-main-display">
  <div class="m-logo-display">
    <img id="m-logo-img-display" src="http://zeosing.com/images/logo-4x.png" alt="Zeosing Inc.">
  </div>
  <div class="m-partner-display row">
    <div class="m-main-leading col-xs-6 text-right">Sé nuestro socio para</div>
    <div class="m-leading-taglines col-xs-6 text-left active">
      <div class="m-leading-tag">Lanzar una nueva plataforma.</div>
      <div class="m-leading-tag">Crear una estrategia de negocio exitosa.</div>
      <div class="m-leading-tag">Crear una marca duradera.</div>
      <div class="m-leading-tag"> Hacer crecer una marca estancada.</div>
      <div class="m-leading-tag"> Hacer algo especial.</div>
    </div>
  </div>
</div>

我们将如何做到这一点？

Answer 1

与其将 background-color: #12a5e5; 属性/值添加到 .m-leading-taglines.active，不如将其添加到 child 当该父级具有 active 类时，如下所示:

.m-leading-taglines.active .m-leading-tag {
  background-color: #12a5e5;
}

确保 .m-leading-tag 有 display: inline-block 并从中删除 background-color: #12a5e5; .m-leading-taglines.active.

Working Fiddle