无法使用Flex时，容器内链接/按钮的右下对齐及动态左对齐实现

这里有个完全符合你需求的方案，不需要修改现有的.right和.button类，也不用依赖Flex布局：

追加的CSS规则 #

我们只需要在原有CSS基础上添加这些规则即可：

/* 给.right容器设置相对定位，作为按钮的定位参照 */
.right {
  position: relative;
  /* 给按钮预留底部空间，避免覆盖内容，值可根据按钮高度调整 */
  padding-bottom: 2.5em;
}

/* 让按钮定位到容器右下角，与缩略图底部齐平 */
.button {
  position: absolute;
  bottom: 0.5em; /* 可自定义与底部的间距 */
  right: 0.5em; /* 可自定义与右侧的间距 */
}

/* 缩略图缺失时，通过.no-thumbs类切换按钮为左对齐 */
.right.no-thumbs .button {
  position: static;
  float: left;
  margin-right: 1em; /* 保持按钮之间的间距 */
}

HTML使用说明 #

• 当缩略图存在时：保持原有HTML结构不变，按钮会自动对齐到.right容器的右下角，和.thumbs底部齐平：

<div class="right">
 <img src="https://loremflickr.com/100/50" />
 <p class="text"> Capital remain stand tree answer next fast. Religious our life tax common interesting other. Lay organization model position game.</p>
 <div class="thumbs">
 <div class="thumb">
 <img src="https://loremflickr.com/50/50" />
 </div>
 <div class="thumb">
 <img src="https://loremflickr.com/50/50" />
 </div>
 <div class="thumb">
 <img src="https://loremflickr.com/50/50" />
 </div>
 </div>
 <a href="" class="button">View1</a>
 <a href="" class="button">View2</a>
</div>

• 当缩略图缺失时：给.right容器添加no-thumbs类，按钮就会自动切换为左对齐：

<div class="right no-thumbs">
 <img src="https://loremflickr.com/100/50" />
 <p class="text"> Capital remain stand tree answer next fast. Religious our life tax common interesting other. Lay organization model position game.</p>
 <a href="" class="button">View1</a>
 <a href="" class="button">View2</a>
</div>

原理说明 #

1. 定位对齐逻辑：利用.right本身的table-cell特性，追加position: relative后，内部的.button设置绝对定位就能以.right为参照，bottom: 0确保按钮和容器底部（也就是.thumbs的底部）齐平，right: 0实现靠右对齐。
2. 预留空间的作用：给.right加padding-bottom是为了避免按钮覆盖容器内的其他内容，这个数值可以根据按钮的实际高度灵活调整。
3. 动态切换对齐：当缩略图缺失时，通过给.right添加no-thumbs类，把按钮的定位重置为正常文档流状态，再用float: left实现左对齐，同时保留按钮间的间距。

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