LTR和RTL <p>内联</p>

Question

我试图根据图像宽度内联两段（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" width="950" height="560">
    </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

Answer 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.