CSS元素的内联表和表单元格对齐

我有一个纯CSS问题。我有一个div,其中包含3个span元素。这是一种从右到左的语言。 这三个元素都与显示垂直对齐:表格单元->垂直对齐。第一个元素是带有圆形背景的png图标,并最右对齐。第二个元素与第一个元素间隔开,只是文本,但我需要第三个元素(黄色按钮)与最左侧对齐。我要这样做的CSS是什么。

这就是我到目前为止

    <style>
    .ttbl{
    display:inline-table; 
      background: #FFFFFF 0% 0% no-repeat padding-box;
      box-shadow: 0px 1px 6px #00000029; 
      border-radius: 2px; 
      opacity: 1; 
      min-height:100px;
    }

    .assist-us-circle {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        text-align: center;
        line-height: 73px;
        vertical-align: middle;
        display: inline-block;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 6px #00000029;
        background: #ccc;
    }
    </style>


    <div class="container" style="direction:rtl;">
        <div class="row">
            <div class="col-12">
                <div class="w-100 mt-5 ttbl">
                    <div style="display:table-cell; vertical-align:middle; text-align: right; padding:0px 30px;">
                        <span class="assist-us-circle">
                            <img src="assets/images/credit-card-icon.png">
                        </span>
                        <span style="margin-right:40px;font-size:18px;line-height:26px;font-weight:600;">donation via credit card</span>   
                        <span style="background: #FFDEAC 0% 0% no-repeat padding-box;border-radius: 2px;padding:10px 20px;line-height: 75px;">donate now</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

为方便起见,我加了一支笔。

https://codepen.io/yaary-vidanpeled/pen/pojxxwo

感谢您提供的任何帮助

评论
Fuck
Fuck
.container {
  display: flex;
  justify-contents: space-between;
  align-items: center
}


<div class="container">
  <div>
    <span>a</span>
  </div>
  <div>
    <span>b</span>
    <span>c</span>
  </div>
</div>

点赞
评论
zq759423682
zq759423682

可以使用float css属性

尝试这个:

<span style="float:left;background: #FFDEAC 0% 0% no-repeat padding-box;border-radius: 2px;padding:10px 20px;margin-top: 10px;">donate now</span>
点赞
评论