0

我正在尝试根据图像宽度嵌入两个段落（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 演示

4

1 回答 1

0

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

这个 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。

于 2014-07-17T14:14:01.670 回答