使用nth-of-type实现图片对齐失效的技术问询

嘿，我一眼就瞅出问题在哪了！你的两张图片分别被独立的<div>标签包裹着，这直接导致你写的.TitleHeader img:nth-of-type(1)这类选择器完全失效——因为img并不是.TitleHeader的直接子元素，它们的父元素是各自的<div>，所以CSS根本找不到要定位的目标元素，两张图自然都堆在左上角啦。

下面给你两种可行的解决方案，根据你的HTML是否能修改来选择：

方案1：修改HTML（最直接） #

把包裹图片的<div>去掉，让img直接成为.TitleHeader的子元素，同时简化CSS（因为绝对定位的元素不需要float和clear，这俩属性对脱离文档流的元素没用）：

修改后的HTML #

<div class="TitleHeader">
  <img src="/images/image1.jpg" alt="Image 1">
  <img src="/images/image2.jpg" alt="Image 2">
</div>

调整后的CSS #

div.TitleHeader { 
  width: inherit; 
  position: relative; 
  margin-bottom: 50px;
  /* 必须给容器加高度！因为绝对定位的元素不占文档流空间，容器会塌陷成0高度 */
  min-height: 100px; /* 替换成你图片的实际高度 */
}
.TitleHeader img { 
  position: absolute; 
  top: 0; 
}
.TitleHeader img:nth-of-type(1) { 
  left: 0; /* 第一张图靠左 */
}
.TitleHeader img:nth-of-type(2) { 
  right: 0; /* 第二张图靠右 */
}

方案2：不修改HTML（适配现有结构） #

如果没法改动HTML，那就调整CSS选择器，直接定位.TitleHeader下的子<div>，再通过父容器控制图片位置：

调整后的CSS #

div.TitleHeader { 
  width: inherit; 
  position: relative; 
  margin-bottom: 50px;
  min-height: 100px; /* 同样需要加高度防止塌陷 */
}
.TitleHeader div {
  position: absolute;
  top: 0;
}
.TitleHeader div:nth-of-type(1) {
  left: 0; /* 第一个div靠左，里面的图片自然跟着靠左 */
}
.TitleHeader div:nth-of-type(2) {
  right: 0; /* 第二个div靠右，里面的图片自然跟着靠右 */
}
.TitleHeader div img {
  display: block; /* 去掉图片默认的inline底部间距，避免不必要的留白 */
}

额外推荐：更简洁的Flex布局方案 #

如果不需要用绝对定位，其实用Flex布局能更轻松实现两端对齐，还不用处理高度塌陷问题，兼容性也很好：

CSS代码 #

div.TitleHeader {
  width: inherit;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between; /* 子元素自动两端对齐 */
  align-items: flex-start; /* 子元素顶部对齐（可选） */
}

不管你的图片有没有被<div>包裹，这个方案都能直接生效，是不是超省心？

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