如何将元素一个向左，另一个向右，一个在另一个下面-CSS

Question

我试图将以下元素一个放在另一个的下面，但一个在左边，另一个在右边：我的代码：

小提琴在这儿：https://jsfiddle.net/ak9hxfpt/2/

我想将test2定位在test1div的右侧，但它应该出现在test1div的下方我想要实现的是：https://jsfiddle.net/ak9hxfpt/3/

然而，这只适用于一个div，如果我对我拥有的所有div尝试float: right，这就是我得到的，但对我来说不起作用：https://jsfiddle.net/ak9hxfpt/4/

每个"；删除链接"；内容应该出现在每个"；一些内容"；。关于如何实现的任何想法

.test2 {
margin-bottom: 30px;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}

<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>

Answer 1

只需在左侧添加一些边距

.test2 {
margin-bottom: 30px;
margin-left:80%;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}

<div class="test2">
remove link
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>

或

.test2 {
margin-bottom: 30px;
width:93%;
text-align:right;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}

<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>

Answer 2

我会尝试将代码嵌套在container中，并将display: flex;与flex-direction: column;一起使用

.test2 {
float: right;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}
.container {
display: flex;
flex-direction: column;
}

<div class="container">
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
</div>

另一种选择是将test上的display: flex;设置为flex-direction: row;，然后可以将test2设置为width: 7%;，而test仍占93%。最后，您可以通过添加gap来分隔它们。检查下面的代码段。

.test2 {
width: 7%;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}
.test {
display: flex;
flex-direction: row;
width: 100%;
gap: 10px;
}

<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>

Answer 3

只需将display: flex; justify-content: flex-end添加到您的test2类中，它就会工作。在此处输入图像描述