如何將內容保持在單行，並將其對齊到底？

權利右側對齊左文本，左左側右對齊文本，在底部停留一段時間。相反，我得到這個：

如果我嘗試使用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以解決此類問題...

來源

2016-05-16 Tar

在td上使用vertical-align:bottom;與類same-line-container。缺省值爲vertical-align:middle;，這就是文字未放置在容器底部的原因。

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; }

<!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>

來源

2016-05-16 14:11:06 Wowsk

謝謝！ 'table'是工作的正確工具嗎？ – Tar

我會親自使用div，但如果你喜歡桌子，那麼去吧！你能接受，如果你覺得這回答你的問題？ – Wowsk

如何將內容保持在單行，並將其對齊到底？

回答

相關問題