将 link/button 与包含其他元素的容器的右侧和底部对齐 - 不能使用 flex

Question

将 link/button 与包含其他元素的容器的右侧和底部对齐。我不能使用 flex.

我在这里找到了一些解决方案，其中大部分在父级上使用相对位置，在子级上使用绝对位置，但我无法按我想要的方式对齐；

我无法修改class.right和.button，我需要这样设置，因为这只是一个component/section.

想要：

链接 view1、view2 与 div.right 的右侧对齐并且底部与 .thumb（3 个图像）相同
如果图片丢失，视图链接到左边；这可以用另一个 class 来完成，我可以动态添加。

.right {
  display: table-cell;
}

.button {
  display:inline-block;
}

thumbs::after {
  display: table;
  clear: both;
  content: "";
}

.thumb { 
  float:left;
  margin-left: 5px;
}

<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>

Answer 1

试试这个

    .right {
display: table-cell;
}
.row {
    position: relative;
 }
.button {
display:inline-block;
position: absolute;
bottom: 0;
right: 0;
}

.thumbs {
    content: "";
    clear: both;
    display: table;
}
thumbs::after {
    display: table;
    clear: both;
    content: "";
}

.thumb { 
float:left;
margin-left: 5px;
}

<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="row">
            <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">View Products</a>
        </div>
    </div>

将 link/button 与包含其他元素的容器的右侧和底部对齐 - 不能使用 flex

Align a link/button to the right and bottom of a container that have also other elements - can't use flex

css

vertical-alignment

css-float