0

我觉得这是一个愚蠢的问题，但老实说，我无法弄清楚这一点。我无法将图像与文本对齐。 Kissoff.weebly.com/account-page.html

中间有“ID:78490 Bank:”等的框应该在它的右边有图像。问题是图像一直将自己放在页面的最后一个标题中并与之对齐（这是一张带有绿色边框的猫的图片）。

此页面使用的主要 CSS：

/*ACCOUNT PAGE!*/
#content-container {
    padding-left: 300px;
    padding-top: 70px;
    height: 200px;
    width: 500px;
}

#stats {
    background-color: #FCFCFC;
    width: 500px;
    margin-top: 20px;
    margin-left: 100px;
    border: 1px solid rgba(125,180,18,0.8);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-top: 18px solid rgba(125,180,18,0.8);
}

img.stat-img {
    margin-top: -45px;
    margin-left: 370px;
    height: 100px;
    width: 100px;
    border: 1px solid rgba(125,180,18,0.8);
}

#box-container {
    width: 200px;
}

.box {
    background-color: #FCFCFC;
    margin-top: 100px;
    margin-left: 1px;
    padding: 5px;
    float: left;
    width: 180px;
    line-height: 5px;
    border: 1px solid rgba(125,180,18,0.8);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-top: 18px solid rgba(125,180,18,0.8);
}

.box2 {
    background-color: #FCFCFC;
    margin-top: 20px;
    margin-left: 1px;
    padding: 5px;
    color: #C2BAAF;
    float: left;
    width: 180px;
    line-height: 5px;
    border: 1px solid rgba(125,180,18,0.8);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-top: 18px solid rgba(125,180,18,0.8);
}

.last-box {
    background-color: #FCFCFC;
    margin-top: 20px;
    margin-left: 1px;
    margin-bottom: 50px;
    padding: 5px;
    color: #C2BAAF;
    float: left;
    width: 180px;
    line-height: 5px;
    border: 1px solid rgba(125,180,18,0.8);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-top: 18px solid rgba(125,180,18,0.8);
}

.box-title {
    margin-top: -15px;
    z-index: 900;
    color: #FFF;
}

.box a:link {
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.box a:visited {
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.box a:hover {
    font-size: 13px;
    color: #000;
    text-decoration: underline;
}

.box a:active {
    font-size: 13px;
    color: #000;
    text-decoration: underline;
}

.box2 a:link {
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.box2 a:visited {
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.box2 a:hover {
    font-size: 13px;
    color: #000;
    text-decoration: underline;
}

.box2 a:active {
    font-size: 13px;
    color: #000;
    text-decoration: underline;
}

.last-box a:link {
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.last-box a:visited {
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.last-box a:hover {
    font-size: 13px;
    color: #000;
    text-decoration: underline;
}

.last-box a:active {
    font-size: 13px;
    color: #000;
    text-decoration: underline;
}

/*ACCOUNT PAGE END!*/

可能的 CSS 问题（主要文本容器）：

#container {
    margin-left: 30px;
    padding-left: 210px;
    padding-top: 70px;
}

#text {
    width: 800px;
    border: 0 solid #000;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

感谢观看，我很感激。

4

2 回答 2

0

这是更正的HTML 和 css 结构。请遵循以下 css 和 HTML。

CSS 查格尼斯

#stats {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FCFCFC;
    border-color: rgba(125, 180, 18, 0.8);
    border-image: none;
    border-radius: 5px 5px 5px 5px;
    border-right: 1px solid rgba(125, 180, 18, 0.8);
    border-style: solid;
    border-width: 18px 1px 1px;
    /*margin-left: 100px;
    margin-top: 20px;*/
    width: 500px;
    float:left;
}
#content-container {
    height: auto;
    margin-left: 30px;
    /*padding-left: 210px;*/
    padding-top: 70px;
}
#stat-container {
    padding:10px;
}
}
img.stat-img {
    border: 1px solid rgba(125, 180, 18, 0.8);
    height: 80px;
    margin-left: 10px;
    margin-top: 5px;
    width: 100px;
}

HTML 更改

您需要将猫图像放在 div id="stats" 之外而不是其中。

希望它对你有用。

于 2013-07-03T06:59:07.193 回答
0

首先添加position:relative到.stat-container类（img的容器）

然后将此 css 添加到您的 .img.stat-img 类

.img.stat-img
{
    position: absolute;
    right: 0;
    top: 0;
}

如果您希望 img 位于框的最右侧，请改为添加position:relative到id="stats"div 中，并在您的 .img.stat-img 类中使用

.img.stat-img
{
    position: absolute;
    right: 40px;
    top: 25px;
}
于 2013-07-03T06:32:41.343 回答