对齐表格内容以匹配阿拉伯语联系人

问题描述 投票:0回答:1

我需要对齐表格内容以匹配阿拉伯语联系人,并使该行从页面右侧开始。我设法将图像向左对齐,但公司信息本身不会向右对齐。文本本身向右对齐,但整体位于图像旁边的最左侧。

.companyInfo
{
  background-color: red;
}

.companyLogo
{
  background-color: yellow;
}
<body>
  <table dir="rtl">
    <tr height="100px">
      <td class="companyInfo">
              اسم الشركه
      </td> 
      <td  class="companyLogo">
        <img src="https://internetmarketingteam.com/wp-content/uploads/2017/05/url-web-address-300x300.png" />
      </td>
    </tr>
  </table>
</body>

我尝试让每个操作系统 col-span=4,尝试给它们每个 50% 的宽度,但这些都不起作用

html css tailwind-css arabic
1个回答
0
投票

您似乎正在使用表格来进行布局。这将是对表格元素的滥用,并使实现您的目标变得更加困难。

这是我对您使用 flexbox 之后的最佳猜测。

.flex-row {
  display: flex;  /* row by default */
}

.companyInfo {
  background-color: red;
  flex: auto;
  display: flex;
  justify-content: start;
  align-items: center;
}

.companyLogo {
  background-color: yellow;
}
<body>
  <div dir="rtl">
    <div class="flex-row">
      <div class="companyInfo">
        اسم الشركه
      </div>
      <div class="companyLogo">
        <img src="https://internetmarketingteam.com/wp-content/uploads/2017/05/url-web-address-300x300.png" />
      </div>
    </div>
  </div>
</body>

© www.soinside.com 2019 - 2024. All rights reserved.