在mobile view中，我们希望显示每个div的div底部

Question

在桌面视图中，输出是正确的，但在移动视图中，我们希望生成每个div都有自己的描述。

现在我的问题是描述显示在所有四个元素之后，我们希望在移动视图中显示每个div的底部。

任何人都可以通过jQuery帮助我。我试图在jQuery的帮助下使用偏移量和高度，但这是行不通的。

null

$(".trust-datail").hide();
$(".trust-wrap").each(function (i) {
    $(this).attr('id', +i);
});

$(".trust-datail").each(function (i) {
    $(this).addClass("tab_" + i);
});

$(".trust-wrap").click(function () {
    $(".trust-datail").slideUp();
    var id = $(this).attr('id');

    if ($(".tab_" + id).is(':visible')) {
        $(".tab_" + id).slideUp();
    }
    else {
        $(".tab_" + id).slideDown();
    }
});
$(".close-new").click(function () {
    $(this).parent(".trust-datail").slideUp();
});

.trust-wrap {
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.2s ease 0s;
}
.trust-wrap img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin:0 auto;
}
.trust-wrap h4 {
  font-weight: bold;
  margin: 25px 0;
  font-size:15px;
}
.trust-datail {
  background: #000;
  border-radius: 5px;
  margin: auto auto 50px;
  padding: 20px;
  position: relative;
  width: 100%;
}
.close-new {
  cursor: pointer;
  position: absolute;
  right: 20px;
  text-align: right;
}
.trust-datail h5 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px;
}
.trust-datail p {
  color: #fff;
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="member_wrap">
    <div class="member_box">
      <div class="row">
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="8">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum1</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="9">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum2</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="10">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum3</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="11">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum4</h4>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
  </div>
    <div class="trust-datail tab_8" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum1</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_9" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum2</h5>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_10" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum3</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_11" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum4</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
  </div>
</div>

null

Answer 1

为您更新了答案

这对你管用。

我所做的是为您创建一个函数，并在$(window).load和$(window).resize中调用它-

var cloneFun = function() {
  if ($(window).width() <= 420) {
    $(".trust-datail").each(function(i) {
      var clonId = "#" + i,
        clon = $(this).clone();
      $(clonId).find('.clearfix').before(clon);
      $(this).addClass('mob-none');
    });
  } else {

    $(".trust-datail").removeClass('mob-none');
  }
};

$(window).load(function() {
  cloneFun();
});

$(window).resize(function() {
  cloneFun();
});

此函数检查窗口大小，如果小于420px，它将复制您的div并将其粘贴到.trust-wrap中

并且我使用.mob-none在移动视图中隐藏您的详细信息。

null

$(".trust-datail").hide();
$(".trust-wrap").each(function(i) {
  $(this).attr('id', +i);
});

$(".trust-datail").each(function(i) {
  $(this).addClass("tab_" + i);
});


$(".trust-wrap").click(function() {
  $(".trust-datail").slideUp();
  var id = $(this).attr('id');

  if ($(".tab_" + id).is(':visible')) {
    $(".tab_" + id).slideUp();
  } else {
    $(".tab_" + id).slideDown();
  }
});
$(".close-new").click(function() {
  $(this).parent(".trust-datail").slideUp();
});

var cloneFun = function() {
  if ($(window).width() <= 420) {
    $(".trust-datail").each(function(i) {
      var clonId = "#" + i,
        clon = $(this).clone();
      $(clonId).find('.clearfix').before(clon);
      $(this).addClass('mob-none');
    });
  } else {

    $(".trust-datail").removeClass('mob-none');
  }
};

$(window).load(function() {
  cloneFun();
});

$(window).resize(function() {
  cloneFun();
});

.trust-wrap {
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.2s ease 0s;
}

.trust-wrap img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 0 auto;
}

.trust-wrap h4 {
  font-weight: bold;
  margin: 25px 0;
  font-size: 15px;
}

.trust-datail {
  background: #000;
  border-radius: 5px;
  margin: auto auto 50px;
  padding: 20px;
  position: relative;
  width: 100%;
}

.close-new {
  cursor: pointer;
  position: absolute;
  right: 20px;
  text-align: right;
}

.trust-datail h5 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px;
}

.trust-datail p {
  color: #fff;
  margin: 0;
}

.mob-none {
  display: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="member_wrap">
    <div class="member_box">
      <div class="row">
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="8">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum1</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="9">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum2</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="10">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum3</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="11">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum4</h4>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="trust-datail tab_8" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum1</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_9" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum2</h5>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_10" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum3</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_11" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum4</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
  </div>
</div>