我正在建立一个 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;
}
谢谢你。