根据孩子的宽度设置div的宽度

时间：2016-07-14 17:59:32

标签： javascript jquery html css css3

Fiddle Example

我们需要“蓝色部分”与孩子的文本一样宽。也就是说，父容器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>

我们怎么做？

2 个答案:

答案 0 :(得分：0)

不是将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

答案 1 :(得分：0)

我添加了以下CSS类

.m-leading-tag {
  display: inline-block;
  padding: 0 5px;
}
.m-leading-taglines.active .m-leading-tag {
  background-color: #12a5e5;
  transition: width 500ms ease-in 0s;
}

也从CSS中删除了这个定义： .m-leading-taglines.active{...}

并将div更改为span s

我认为它接近您所寻找的（如果不是这样，请告诉我）

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-tag {
  display: inline-block;
  padding: 0 5px;
}
.m-leading-taglines.active .m-leading-tag {
  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">
    logo
  </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">
      <span class="m-leading-tag">Lanzar una nueva plataforma.</span>
      <span class="m-leading-tag">Crear una estrategia de negocio exitosa.</span>
      <span class="m-leading-tag">Crear una marca duradera.</span>
      <span class="m-leading-tag">Hacer crecer una marca estancada.</span>
      <span class="m-leading-tag">Hacer algo especial.</span>
    </div>
  </div>
</div>

相关问题
最新问题