如何将2个divs 1放在中间，1放在右侧

Question

我想放置我的2个div(1个在中间，1个在右侧(。这是我的密码。对不起，我不确定这是对是错。我想要和图片一样的输出。

https://i.stack.imgur.com/OXqpW.png

这是我的代码

<div class="payment " style="background-color: #370a0c;padding: 1px 0;background-image: url(image/rectangle2.png);background-repeat: no-repeat;background-position: right;background-size: 230px 79px; ">
<div id="payment_row" class="row " style="width: 100%; text-align:center; padding-top: 20px; ">
<div class="col-9 ">
<ul class="payment-list" style="display: flex; margin: auto; ">
<li style="padding-right: 20px; ">
<a href=" "><img src="image/visa.png " alt=" "></img>
</a>
</li>
<li style="padding-right: 20px; ">
<a href=" "></a><img src="image/Mastercard.png " alt=" "></img>
</a>
</li>
<li style="padding-right: 20px; ">
<a href=" "></a><img src="image/amex.png " alt=" "></img>
</a>
</li>
<li style="padding-right: 20px; ">
<a href=" "></a><img src="image/paypal.png " alt=" "></img>
</a>
</li>
<li class="payment-list-2" style="padding-right: 20px; ">
<a href=" "></a><img src="image/discover.png " alt=" "></img>
</a>
</li>
<li class="payment-list-3" style="padding-right: 20px; ">
<a href=" "></a><img src="image/Maestro.png " alt=" "></img>
</a>
</li>
<li class="payment-list-3" style="padding-right: 20px; ">
<a href=" "></a><img src="image/skrill.png " alt=" "></img>
</a>
</li>
</ul>
</div>
<div id="payment" class="col-2 " style="display:flex; ">
<ul style="display: flex; margin-right: 3px; margin-left: -70px;">
<a href=" "></a><img id="player_img" src="image/icon-people.png " alt=" " style="width: 47px;height: 47px;margin-top: -8px;"></img>
</ul>
<ul style="margin-left: -28px;">
<li>
<h1 id="player_num" style="font-size: 35px; line-height: 15px; margin-right: 45px; ">
21,765
</h1>
</li>
<li id="player_count" style="line-height: 15px; margin-right: 15px; margin-left: -30px;margin-top: 11px;">
Online Players
</li>
</ul>
</div>

帮帮我，谢谢！

Answer 1

您似乎在使用某种框架，如Bootstrap(带有col-(，它为您处理响应性。在这种情况下，您应该考虑容器的"宽度"由12个"单位"组成。col-3+col-6+col-3的组合将等于12，中心元素占据更多的"空间"。

在框架之外，尝试使用flexbox是正确的。不过请注意，您不应该将margin应用于flexbox(并且永远不应该使用内联样式(。

下面是一个非常精简的示例，说明如何使用flexbox进行配置。您所需要的只是容器上的display: flex，以及要并排对齐的三个元素上的flex: 1。注意，如果你不想要三个，你甚至可以使用一个空元素，如下所示：

.container {
display: flex;
}
.container ul {
flex: 1;
}

<div class='container'>
<ul>
<!-- Empty Left Column -->
</ul>
<ul>
Payment List
</ul>
<ul>
<li>
<h1 id="player_num">
21,765
</h1>
</li>
<li id="player_count">
Online Players
</li>
</ul>
</div>

Answer 2

您可以创建一个有两个子容器，并将margin-left: auto;添加到这两个子容器中，它们将根据需要对齐。

下面只是一个POC

.flex-container {
display: flex;
align-items: center;
background: darkred;
color: white;
}
.flex-container>* {
margin-left: auto;
}
.list {
display: flex;
}
.list>ul {
list-style-type: none;
display: flex;
}
.list>ul>li+li {
margin-left: 1rem;
}

<div class="flex-container">
<div class="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>count:213213</div>
</div>