Блог

Я получил шаблон временной шкалы bootstrap v2 от betul.

Вид :

 http://codepen.io/betdream/full/Ifvbi/
  

Редактировать :

 http://codepen.io/betdream/pen/Ifvbi
  

Он работает нормально, но в этой версии есть пробелы между левым и правым элементами.

Возможно ли устранить пробелы между ними?

// Просто для создания вопроса 🙂

 .timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
  

или кто-нибудь знает какую-нибудь версию без пробелов, например, Google Plus или что-то в этомроде?

Похоже, что шаблон начальной загрузки — не ваш лучший вариант. Если вы хотите, чтобы содержимое дат переплеталось с содержимым до и после него, вам понадобится что-то более динамичное, например, Masonry.

Вот пример, который я отредактировал для вас. Он показывает 2 столбца, как у вас здесь, и он также блокируется независимо от длины содержимого dates. Таким образом, нет необходимости добавлять отрицательные поля и т.д..

http://codepen.io/emaildano/pen/LEbLeQ

 <section class="grid-container">
  <div class="grid">
    <a href="#"><div class="item i1">
     <span class="date">2015</span>
     <p class="title">Content</p>
    </a>
  </div>
</section>

html, body {
  background: #333;
  font-family: Helvetica;
}

.grid-container {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.toggle {
  text-align: center;
  padding: 0;
  color: white;
}

.toggle li {
  display: inline;
  padding: 0 60px;
}

.toggle label {
  font-size: 1.2em;
  padding: 0 10px;
}

.grid {
  margin: 0 auto;
}

.item {
  color: white;
  display: table;
  font-size: 1.4em;
  text-align: center;
  margin: 5px;
  width: 450px;
}

.item:hover .title {
  opacity: 1;
}

.title {
  display: table-cell;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}

.i1, .i3, .i6, .i7  {
  background: #2ecc71;
  height: 280px;
}

.i2, .i4, .i5, .i8 {
  background: #e74c3c;
  height: 180px;
}

.i9, .i10, .i11, .i12, .i13, .i14, .i15 {
  background: #e74c3c;
  height: 180px;
}

.i4 {
  height: 349px;
}

.expand {
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  height: 100%;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  z-index: 99;
  text-indent: -9999px;
}

.date {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  border-radius: 50%;
  height: 75px;
  width: 75px;
  color: #000;
  display: block;
  line-height: 3.7;
  font-size: 20px
}

jQuery(document).ready(function ($) {

  var $container = $('.grid').masonry({
    columnWidth: 10,
    itemSelector: '.item',
    isFitWidth: true
  });

  var arrGreen = new Array($('.i1'),$('.i3'),$('.i6'),$('.i7'));
  var arrRed = new Array($('.i2'),$('.i4'),$('.i5'),$('.i8'), $('.i9'),$('.i10'),$('.i11'),$('.i12'), $('.i13'),$('.i14'),$('.i15'));

  $('input').click(function () {
    $('.item').removeClass('expand');

    if ($('.green').is(':checked')) {
      $container.masonry('hide', arrRed);
      $(arrGreen).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    } else if ($('.red').is(':checked')) {
      $container.masonry('hide', arrGreen);
      $(arrRed).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    } else if ($('.all').is(':checked')) {
      $(arrGreen).each(function (index, element) {
        element.show();
      });
      $(arrRed).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    }
  });

  $('.item').click(function () {
    $(this).toggleClass('expand');
  });

});
  

Это также отличный вариант, если вы хотите перейти на мобильные устройства, потому что Masonry будет настраиваться в зависимости от ширины браузера. Таким образом, ваши 2 столбца станут 1, и они по-прежнему будут идеально выстраиваться без перекрытия.

Надеюсь, это поможет!