0
我正在为一篇主要文章添加一个“框”的Wordpress网站。这篇文章使用CSS和几个Div来构建。这一切都正常工作，唯一的问题是，当我需要一个滚动条时，它会超出正确的框边框。更改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;
}
谢谢。
您应该检查可视区域周围的宽度和填充。 –