主页 / 问题 / 730524
Accepted
Александр Беляков
Asked:2020-10-14 02:07:21 +0000 UTC2020-10-14 02:07:21 +0000 UTC

为什么 jQuery 移动后元素会粘在一起？

  • 772

有趣的元素行为。重点如下。

  1. 我们将浏览器缩小到小于 800 像素的宽度。
  2. btn 类的元素被移动到行块。
  3. 将浏览器更改为超过 800 像素的宽度。
  4. 元素被移回带有 wrap 类的块中。
  5. 问题是元素粘在一起，尽管它们应该均匀地分布在 wrap 块周围，就像它们在开始时一样。

如何解决这个问题呢？？？

$(document).ready(function() {
  function change() {
    var width = window.innerWidth;
    if (width <= 800) {
      $('.main .btn').prependTo($('.row'));
    } else {
      $('.row .btn').prependTo($('.main .wrap'))
    };
  };
  change();
  $(window).resize(function() {
    change();
  });
});
.row {
  border: 1px solid red;
  width: 80%;
  margin: 20px auto;
  padding: 20px 0px;
  display: table;
}

.row a {
  display: table-cell;
  text-align: center;
  padding: 10px;
}

.main {
  width: 80%;
  margin: 0px auto;
  border: 1px solid black;
}

.wrap {
  text-align: justify;
  border: 1px solid black;
}

.wrap:after {
  display: inline-block;
  content: "";
  width: 100%;
}

.excerpt {
  width: 45%;
  display: inline-block;
  padding: 10px;
  text-align: right;
  vertical-align: bottom;
  border: 1px solid black;
}

.btn {
  text-decoration: none;
  display: inline-block;
  padding: 15px;
  vertical-align: bottom;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row"></div>
<div class="main">
  <div class="wrap">
    <a href="#" class="btn">Text1</a>
    <a href="#" class="btn">Text2</a>
    <a href="#" class="btn">Text3</a>
    <a href="#" class="btn">Text4</a>
    <div class="excerpt">
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut culpa dolorum, et expedita facere itaque minus obcaecati officia perspiciatis repellat tempore tenetur veniam? Cum dolor ex fugiat illum veritatis.</span></p>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    问题是，由于按钮之间的空间，对齐有效，并且按钮移动时没有空格并堆成一堆：

    p { text-align: justify; text-align-last: justify; }
    <p><button>Кнопка 1</button> <button>Кнопка 2</button> <button>Кнопка 3</button></p>
<p><button>Кнопка 1</button><button>Кнопка 2</button><button>Кнопка 3</button>  </p>

    问题可以这样解决：

    $(document).ready(function() {
  function change() {
    var width = window.innerWidth;
    if (width <= 800) {
      $('.wrap-btns').prependTo($('.row'));
    } else {
      $('.wrap-btns').prependTo($('.main .wrap'))
    };
  };
  
  change();
  $(window).resize(function() {
    change();
  });
});
    .row {
  border: 1px solid red;
  width: 80%;
  margin: 20px auto;
  padding: 20px 0px;
  display: table;
}

.row .wrap-btns {
  display: table;
  width: 100%;
}

.row a {
  display: table-cell;
  text-align: center;
  padding: 10px;
}

.main {
  width: 80%;
  margin: 0px auto;
  border: 1px solid black;
}

.wrap {
  text-align: justify;
  border: 1px solid black;
}

.wrap:after {
  display: inline-block;
  content: "";
  width: 100%;
}

.excerpt {
  width: 45%;
  display: inline-block;
  padding: 10px;
  text-align: right;
  vertical-align: bottom;
  border: 1px solid black;
}

.btn {
  text-decoration: none;
  display: inline-block;
  padding: 15px;
  vertical-align: bottom;
  border: 1px solid black;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row"></div>
<div class="main">
  <div class="wrap">
    <span class="wrap-btns">
      <a href="#" class="btn">Text1</a>
      <a href="#" class="btn">Text2</a>
      <a href="#" class="btn">Text3</a>
      <a href="#" class="btn">Text4</a>
    </span>
    <div class="excerpt">
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut culpa dolorum, et expedita facere itaque minus obcaecati officia perspiciatis repellat tempore tenetur veniam? Cum dolor ex fugiat illum veritatis.</span></p>
    </div>
  </div>
</div>

    • 1

相关问题