Question

我正试图达到这种状态：

右侧左侧文本对齐，左侧右侧文本对齐左侧，同时保持在底部。相反，我得到了这个：

如果我尝试使用relative-absolute solution，则会破坏左侧块内容的单行对齐。这是HTML：

（顺便说一下：我正在使用桌子，因为它很整洁，我对非桌面解决方案持开放态度......）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>

      <link rel="stylesheet" type="text/css" href="main.css"/>
  </head>
  <body dir="rtl">
    <table>
        <tr>
            <td><h1>מימין לשמאל</h1></td>
            <td class="ltr same-line-container">
                <span>left to right text</span>
                <span style="border:1px solid black; margin-right: 2.5px;"/>
                <span>123456789</span>
            </td>
        </tr>
    </table>
    <hr>
    </div>
  </body>
</html>

CSS：

table{ width: 100%; }
td { border: 0.5px solid red; }
div{ border: 0.5px solid blue; }
span{ border: 0.5px solid cyan; }

.same-line-container span {
    display:inline;
}

.bottom-content-container {
    position:relative;
}

.bottom-content-container span {
    position:absolute;
}

.rtl { direction: rtl; }
.ltr { direction: ltr; }
.right{ float: right; }
.left{ float: left; }

我开始徘徊是否必须添加JS来克服这些问题......

Answer 1

在vertical-align:bottom;上使用td类same-line-container。默认值为vertical-align:middle;，这就是文本未定位到容器底部的原因。

＆＃13;

table{ width: 100%; }
td { border: 0.5px solid red; }
div{ border: 0.5px solid blue; }
span{ border: 0.5px solid cyan; }
.same-line-container {
  vertical-align:bottom;
  }
.same-line-container span {
    display:inline;
}

.bottom-content-container {
    position:relative;
}

.bottom-content-container span {
    position:absolute;
}

.rtl { direction: rtl; }
.ltr { direction: ltr; }
.right{ float: right; }
.left{ float: left; }

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>

      <link rel="stylesheet" type="text/css" href="main.css"/>
  </head>
  <body dir="rtl">
    <table>
        <tr>
            <td><h1>מימין לשמאל</h1></td>
            <td class="ltr same-line-container">
                <span>left to right text</span>
                <span style="border:1px solid black; margin-right: 2.5px;"/>
                <span>123456789</span>
            </td>
        </tr>
    </table>
    <hr>
    </div>
  </body>
</html>

＆＃13;

如何在将内容与底部对齐的同时保持单行内容？

1 个答案: