Question

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

中心的盒子有 “ID：78490 银行：“等应该有右边的图像。问题是图像不断将自己置于页面的最后一个标题中并与之对齐（这是一张带有绿色边框的猫的照片）。

此页面使用的主要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;
}

感谢您的关注，我很感激。

Answer 1

首先将position:relative添加到.stat容器类（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;
}

Answer 2

这是corrected HTML和css结构。请遵循以下css和HTML。

CSS Chagnes

#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更改

您需要将cat image放在div id =“stats”之外，而不是在其中。

希望它对你有用。

无法对齐图像？

2 个答案: