html - 将滚动条更改为 div 的左侧

Question

我正在构建一个 Wordpress 网站，该网站有一个主要文章的“框”。这是使用 CSS 和文章周围的几个 Div 构建的。这一切都很好，唯一的问题是当我需要滚动条时，它出现在右框边框之外。

自己看看(周围有很棒的完美红色圆圈!)。

基本上，我希望它留在文章中，所以在最后一张图片的左侧(右侧边框)。我在互联网上阅读，发现您可以使用 dir="rtl"反转滚动条，但这会反转所有滚动条，而这并不是我真正想要的。

[编辑 - 为了清楚起见，我不希望它出现在文章本身的左侧，只是在文本右侧的框内。这正是我想要的，但如您所见，它弄乱了文章框。我希望它处于那个位置，但又不会搞砸文章。]

[结束编辑]

这是 CSS(它来自修改后的模板，如果有明显错误，请原谅):

.article {
    margin-bottom:20px;
}
.article-corps-title {
    background:url(images/article_sprite.png) no-repeat;
    background-position:0 -17px;
    min-height:70px;
    max-height:142px;
    position:relative;
}
.page-corps-title {
    display:block;
    /*background:url(images/article_sprite.png) no-repeat;
    background-position: 13px -65px;*/
    background:url(images/articlebox.png) no-repeat;
    background-position:15px 0px;
    height:80px;
}
.article-top {
    position:absolute;
    top:13px;
    right:25px;
}
.article-top a {
    display:block;
    font-size:10px;
    font-weight:700;
    color:#aaa;
    text-decoration:none;
    padding:4px 12px 0 0;
    background:url(images/icons.png) no-repeat;
    background-position:top right;
}
.article-date {
    position:absolute;
    left:11px;
    top:26px;
    display:block;
    width:40px;
    text-align:center;
}
.article-date .month {
    font-size:13px;
    font-weight:700;
    line-height:15px;
    color:#FFF;
    text-transform:uppercase;
}
.article-date .day {
    font-size:22px;
    font-weight:700;
    color:#FFF;
}
h2.page-title {
    text-align:center;
    font-size:26px;
    font-weight:700;
    padding-top:10px;
    padding-bottom:15px;
    color:#000000;
    text-shadow:#CCC 0 0 2px;
    max-width:565px;
}
h2.article-title {
    font-size:26px;
    font-weight:700;
    margin-left:80px;
    padding-top:30px;
    color:#ce0709;
    text-shadow:#CCC 0 0 2px;
    max-width:565px;
}
h2.article-title a, h2.page-title a {
    color:#ce0709;
    text-decoration:none;
}
h2.article-title a:hover,h2.page-title a:hover {
    color:#E00
}
.article-meta-autor {
    font-size:11px;
    color:#aaaaaa;
    margin-left:80px;
    background:url(images/icons.png) no-repeat;
    background-position:left -15px;
    padding:4px 0 4px 20px;
    max-height:11px;
    line-height:14px;
}
.article-meta-autor a, .article-meta-keywords a, .article-meta-comments a {
    color:#aaaaaa;
    text-decoration:none;
    font-weight:700;
}
.article-meta-autor a:hover, .article-meta-keywords a:hover, .article-meta-comments a:hover {
    text-decoration:underline;
}

.article-corps {
    position:relative;
    /*background:url(images/article_sprite.png) repeat-y;
    background-position:-683px 0px;*/
    background:url(images/articleboxmiddle.png) repeat-y;
    background-position:-5px 0px;
    /*min-height: 250px;*/
    height:300px;
    margin-left:20px;
    padding:13px 43px 0px 50px;
    line-height:20px;
    overflow:auto;/*hidden;*/
}
.article-read-more {
    margin:0px auto;
    width:164px;
    padding-bottom:15px;
}
.article-read-more a {
    display:block;
    width:156px;
    height:26px;
    text-align:center;
    padding-top:9px;
    background:url(images/read_more.png) no-repeat;
    background-position:top left;
    font-weight:700;
    color:#FFF;
    text-decoration:none;
    text-transform:uppercase;
}
.article-read-more a:hover {
    background-position:bottom left;
}
.article-meta-keywords {
    position:absolute;
    bottom:0;
    left:50px;
    background:url(images/icons.png) no-repeat;
    background-position:0 -34px;
    padding-left:20px;
    font-size:11px;
    color:#aaa;
    max-height:20px;
    max-width:450px;
    overflow:hidden;
}
.article-meta-comments {
    position:absolute;
    bottom:0;
    right:45px;
    background:url(images/icons.png) no-repeat;
    background-position:0 -54px;
    padding-left:20px;
    font-size:11px;
    color:#aaa;
}
.article-meta-keywords a {
    color:#aaa;
    font-weight:700;
    text-decoration:none;
}
.article-meta-keywords a:hover {
    text-decoration:underline;
}
.article-footer {
    display:block;
    /*background:url(images/article_sprite.png) no-repeat;
    background-position:14px -15px;*/
    background:url(images/articlebox.png) no-repeat;
    background-position:15px -420px;
    height:45px;
}

谢谢。

Answer 1

使用 dir="rtl" 为文本提供方向。滚动条将出现在左侧。
然后对p、div等内部元素使用dir="ltr"来抵消效果。这样，dir="rtl"

这是 fiddle - http://jsfiddle.net/ashwyn/dcLQQ/
虽然我在 Firefox 中工作，但在我的 chrome 中却不行。

[编辑]
下面是将滚动条稍微向左移动的 fiddle -
http://jsfiddle.net/ashwyn/fPGy8/1/

除了上述之外，我认为没有任何其他解决方案可以解决。