css - 将链接/按钮与包含其他元素的容器的右侧和底部对齐 - 不能使用 flex

Question

将链接/按钮与包含其他元素的容器的右侧和底部对齐。我不能使用 flex。

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

我不能修改类.right和.button，我需要这样设置，因为这只是一个组件/部分。

想要:

• 链接 view1、view2 与 div.right 的右侧对齐，并且底部与 .thumb(3 个图像)相同

• 如果图像丢失， View 链接转到左侧；这可以通过另一个类来完成，我可以动态添加它。

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