メイン記事用の「ボックス」を備えた 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;
}
ありがとうございました。