将位置绝对元素与相对元素

Question

我有一个具有最小宽度的位置绝对元素。我想要做的是将绝对元素的结束与相对元素的结束对齐。

相对元素没有固定的宽度。宽度可以根据内部的内容而变化。

这里的用例是，我正在构建一个自定义下拉列表。相对元素是具有所选文本的标签，位置绝对元素是下拉列表。

<div class="container">
 <div class="text">Text from list</div>
 <ul class="list">...</ul>
</div>

上面的图片有我期待的样子。我该怎么做才能实现这种对齐？它可以用纯CSS完成吗？

Answer 1

＆＃13;

＆＃13;

.relative-div {
	position:relative;
	min-height: 50px;
	background:#BB9A9B;
}
.abs-div {
	position: absolute;
	right: 0;
    top: calc(100% + 10px);
	min-width: 100px;
	min-height: 50px;
	background: red;
}

＆＃13;

<div class="container">
	<div class="relative-div">
	relative-div
		<div class="abs-div"></div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议使用flex-box。这是一个备忘单https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

.element {
    padding: 0.75rem 1rem;
    border: 1px solid navy;
    background-color: dodgerblue;
    color: white;
    margin: 10px 0px;
}

.parent-class {
    position: absolute;
    right: 0px;
}

.relative-element {
    position: relative;
 }

.absolute-element {
    position: absolute;
    min-width: 200px;
    right: 0px;
}

    <div class="parent-class">
      <div class="element relative-element">Relative Element</div>
      <div class="element absolute-element">Absolute Element</div>
    </div>