Question

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

亲自看看（周围有完美的红色圆圈！）。

ScreenShot

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

[编辑 - 为了说清楚，我不希望它在文章本身的左侧，只是在文本右侧的框内。这就是我想要的，但正如你所看到的，它会弄乱文章框。我希望它处于那个位置，但不要搞砸了这篇文章。]

Screenshot 2

[结束编辑]

这是CSS（这来自一个modded模板，如果有明显的错误，请原谅我）：

.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"为文字指明方向。滚动条将显示在左侧然后使用dir="ltr"到内部元素（例如p, div等）以使效果无效。这样，dir="rtl"

这是小提琴 - http://jsfiddle.net/ashwyn/dcLQQ/
我虽然在Firefox中工作，但在我的Chrome中却没有。

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

我认为除了上述内容之外，还有其他解决办法可以解决。

Answer 2

这不是解决您问题的方法，而只是一个建议：

请注意，您违反了用户期望的标准行为 - 右侧语言中的滚动条始终显示为左侧语言，这可能是糟糕的可用性。由于您没有创建需要RTL的站点，因此最好不要更改标准浏览器行为。

Answer 3

你没有给我足够的代码（结构）来给出一个特定的答案，但看起来好像你可以缩小包含文章的div。

将滚动条更改为div的左侧

3 个答案: