LTR 和 RTL <p> 内联

Posted 2023-03-14

【中文标题】LTR 和 RTL <p> 内联

【英文标题】：LTR and RTL <p> inline

【发布时间】：2014-07-17 13:53:13

【问题描述】：

我正在尝试根据图像宽度嵌入两个段落（LTR 和 RTL）。所以这两个段落都在同一行，但都从相反的方向阅读。 我试图浮动：右第二段（RTL），但它把它放在图像的顶部。

html：

    <div id="content">
        <h1>Title</h1>
        <p class="p-ltr">AGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA.
ORPOREP TATUR, OMNIMOL ESSIMEN DANIMUST, OMMO EX EX EXCEATE
SUSTO ET VOLORIT ATEST, CONSECTEM CONE RESTI NIMI,
SED QUIA PRAESEQUUNT AUT ET VERCHICID ET ODI NONSEQUI
DERESTEM. PA CULPARI BEAQUI DELES ET ENDI DOLUPTAT IN REM
VOLO VOLORUMET AUT FACESTO EARUM CUS ULLECTAS CONSERUM
SUNDIT ANT, SOLEST AUTEM NOBITATUR ACIA VENIT LANT ODITEMAGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA.
 </p> 
        <p class="p-rtl">AGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA.
ORPOREP TATUR, OMNIMOL ESSIMEN DANIMUST, OMMO EX EX EXCEATE
SUSTO ET VOLORIT ATEST, CONSECTEM CONE RESTI NIMI,
SED QUIA PRAESEQUUNT AUT ET VERCHICID ET ODI NONSEQUI
DERESTEM. PA CULPARI BEAQUI DELES ET ENDI DOLUPTAT IN REM
VOLO VOLORUMET AUT FACESTO EARUM CUS ULLECTAS CONSERUM
SUNDIT ANT, SOLEST AUTEM NOBITATUR ACIA VENIT LANT ODITEMAGNAM RE VOLUPTAT LABO. ITAE PORATEM QUI SIN NUM FUGA..</p>
        <img src="images/intro_7.jpg"  >
    </div>

CSS：

#content 
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 10%;
    z-index: -10;


#content img 
    opacity: 0.75;


#content img:hover 
    opacity: 1;


#content h1 
    color: black;
    font-size: 3vw;
    letter-spacing: 0.1vw;
    text-transform: uppercase;
    margin-bottom: 5%;


#content p 
    position: relative;
    width: 350px;
    margin-bottom: 5%;
    font-size: 12px;
    line-height: 14px;


#content .p-ltr 
    text-align: left;
    left: 25%;
    direction: ltr;


#content .p-rtl 
    text-align: right;
    /*left: 56.5%;*/
    direction: rtl;

JSFiddle Demo

【参考方案1】：

我正在向您发送下面所需的代码，并在此处查看JS Fiddle code。

这个 JS Fiddle 也有 LTR 和 RTL 的文本对齐方式。

我现在发送New JS Fiddle

这里内容的宽度是固定的，内容和图片之间的距离也根据需要增加。

#content 
    /*position: absolute;*/
    width: 100%;
    text-align: center;
    margin-top: 10%;
    z-index: -10;



#content img 
    opacity: 0.75;


#content img:hover 
    opacity: 1;


#content h1 
    color: black;
    font-size: 3vw;
    letter-spacing: 0.1vw;
    text-transform: uppercase;
    margin-bottom: 5%;


#content p 
   /* position: relative;*/
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    width: 440px;


#content .p-ltr 
    direction: ltr;
    left: 25%;
    margin: 0 auto;
    padding-right: 30px;
    text-align: left;


#content .p-rtl 
    direction: rtl;
    margin: 1em auto;
    padding-left: 30px;
    text-align: right;


#content img 
    margin: 60px 0;

问候 D.

【讨论】：

这也可以，但我必须使用 position: absolute;关于#内容。并在段落之间留出更多空间，以匹配图像的宽度。

如果你想让文本自动调整到内容包装器的 50% 宽度，那么你需要使用引导程序，然后给 .p-rtl 的段落标签和填充所需的 padding-left - .p-ltr 类的权利。