调整尺寸时文章无法置于同级元素上方的技术问题

嘿，我看了你遇到的问题：点击缩略图后目标文章没法跑到顶部当特色文章，反而原特色文章一直霸着位置。核心原因其实很简单——DOM元素的渲染顺序是按HTML里的排列来的，哪怕你给新文章加了.featured类，它在DOM里还是排在后面，所以原有的Article 1（第一个元素）始终会在它前面。另外你加的.thumb { align-items: baseline; }完全没用，因为这个属性是给flex容器用的，你的.block是inline-block元素，这个样式根本不会生效。

下面是具体的解决方案：

1. 修正JavaScript逻辑 #

你需要在点击事件里，把被点击的文章移动到容器的最顶部，这样它的DOM顺序变成第一个，自然就会占据顶部的特色位置。修改后的JS代码如下：

$("div[id^='block-']").click(function() {
  // 先把所有文章设为缩略图状态
  $("div[id^='block-']").addClass("thumb").removeClass("featured");
  // 把当前点击的文章设为特色状态
  $(this).removeClass("thumb").addClass("featured");
  // 关键：把当前元素移到容器最前面
  $(this).prependTo(".container");
});

2. 优化CSS样式 #

删掉那个无效的.thumb样式，再调整一下容器和块的对齐方式，避免inline-block元素的默认间距问题：

* { margin: 0; padding: 0; }
.container {
  width: 75vw;
  margin: 24px auto;
  border: 1px solid black;
  /* 消除inline-block元素的默认行高间距 */
  line-height: 0;
}
.block {
  width: 120px;
  height: 120px;
  margin: 16px;
  display: inline-block;
  border: 1px solid black;
  transition: all .5s ease;
  /* 让所有块顶部对齐，避免错位 */
  vertical-align: top;
}
.image {
  height: 50%;
  background: skyblue;
  display: block;
  width: 100%;
}
.content {
  font-size: 8px;
  font-family: Arial;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}
.featured {
  width: calc(100% - 32px);
  margin: 16px 16px 0;
}
/* 删掉这个没用的样式 */
/* .thumb { align-items: baseline; } */

3. 完整可运行代码 #

把修改后的代码整合起来，现在点击任意缩略图，它会立刻移到顶部变成全屏特色文章，原特色文章则缩成缩略图排在后面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
* { margin: 0; padding: 0; }
.container {
  width: 75vw;
  margin: 24px auto;
  border: 1px solid black;
  line-height: 0;
}
.block {
  width: 120px;
  height: 120px;
  margin: 16px;
  display: inline-block;
  border: 1px solid black;
  transition: all .5s ease;
  vertical-align: top;
}
.image {
  height: 50%;
  background: skyblue;
  display: block;
  width: 100%;
}
.content {
  font-size: 8px;
  font-family: Arial;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}
.featured {
  width: calc(100% - 32px);
  margin: 16px 16px 0;
}
</style>
<div class="container">
  <div id="block-1" class="block featured">
    <div class="image"></div>
    <div class="content"> ARTICLE 1<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </div>
  </div>
  <div id="block-2" class="block thumb">
    <div class="image"></div>
    <div class="content"> ARTICLE 2<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </div>
  </div>
  <div id="block-3" class="block thumb">
    <div class="image"></div>
    <div class="content"> ARTICLE 3<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </div>
  </div>
  <div id="block-4" class="block thumb">
    <div class="image"></div>
    <div class="content"> ARTICLE 4<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </div>
  </div>
  <div id="block-5" class="block thumb">
    <div class="image"></div>
    <div class="content"> ARTICLE 5<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </div>
  </div>
</div>
<script>
$("div[id^='block-']").click(function() {
  $("div[id^='block-']").addClass("thumb").removeClass("featured");
  $(this).removeClass("thumb").addClass("featured");
  $(this).prependTo(".container");
});
</script>

原理说明 #

• prependTo(".container")：把被点击的元素从原来的DOM位置移除，插入到容器的第一个子元素位置，这样它在布局里就会排在最前面，自然成为顶部的特色文章。
• vertical-align: top和line-height: 0：解决inline-block元素默认基线对齐导致的间距和错位问题，让所有块的顶部对齐更整齐。
• 移除无效的.thumb样式：减少冗余代码，避免无效样式干扰。

内容的提问来源于stack exchange，提问作者loudenw