0

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

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

截屏

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

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

截图 2

[结束编辑]

这是 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;
}

谢谢你。

4

3 回答 3

2

用于dir="rtl"为文本指明方向。滚动条将出现在左侧。
然后使用dir="ltr"到内部元素如p, divetc 来消除效果。这边走,dir="rtl"

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

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

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

于 2012-06-12T11:16:09.607 回答
1

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

请注意,您违背了用户期望的标准行为 - 对于从左到右的语言,滚动条总是出现在右侧,这可能会导致可用性不佳。由于您没有创建需要 RTL 的站点,因此最好不要更改标准浏览器行为。

于 2012-06-12T11:22:05.517 回答
0

你没有给我足够的代码(结构)来给出一个具体的答案,但看起来你可以缩小包含文章的 div 的范围。

于 2012-06-12T11:13:09.183 回答