放置图像

Question

所以我是这个整个html css编程的新手。我正在开发一个简单的网站来显示我的简历。我想在主要内容的右侧放置一个图像。我想把它放在那里，以便我最终能够点击我的名字，它将使用Jquery滑出，但我似乎无法将它放在主要内容右侧的10px左右。这是我的网站。

http://students.cs.byu.edu/~drbones/sean_resume/resume.html

这里是主要内容和图片的CSS

body
    {
        background-image:url('images/darkgreen.png');
        font-family: verdana;
    }
h1
    {
        text-align:center;
    }
.main
    {
        padding: 20px 20px 20px 20px;
    }
.page
    {
        margin-left:auto;
        margin-right:auto;
        width:800px;
        border: solid black;
        padding: 10px 10px 10px 10px;
        background-color:#E8E8E8;
        border-radius: 15px;
        -moz-border-radius: 15px;
        -moz-box-shadow: 0 0 30px 5px #999;
        -webkit-box-shadow: 0 0 30px 5px #999;
        overflow: hidden;
    }
.profile_image
    {
        float:right;
        margin-top: 100px;
    }

PS - 关于简历内容的任何有用提示对你所有CS雇主都有帮助;）

Answer 1

欢迎来到SO，sean.daryl！

您可以将profile_image div放在page div内，如此

<hr>

<div class="profile_image">
    <img src="images/sean_daryl_crop.jpg">
</div>

<!--EDUCATION-->

这样，图像包含在圆形框内。 （假设这是你想要的。）

Answer 2

.profile_image {
    float: right;
    margin-right: 10px;

使用firebug mozilla

Answer 3

这应该可以按你的意愿工作：

.main {
    margin: 0 auto;
    padding: 20px;
    width: 1040px;
    overflow: hidden; // Or use clearfix
}

.profile_image {
    border: 2px solid black;
    box-shadow: 0 0 30px 5px #999999;
    float: right;
    margin-left: 10px;
    margin-top: 100px;
    width: 200px;
}

.page {
    background-color: #E8E8E8;
    border: medium solid black;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 0 30px 5px #999999;
    float: right;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 10px;
    width: 800px;
}

Answer 4

这可以指定.main的宽度，使.page和.profile_image彼此相邻。

.main
    {
        padding: 20px 20px 20px 20px;
        margin: 0 auto;
        width:820px; /* CHANGE THIS just + your image size */
    }
.page
    {
        width:800px;
        float:left; /* this put the div at the start of the .main */
        border: solid black;
        padding: 10px 10px 10px 10px;
        background-color:#E8E8E8;
        border-radius: 15px;
        -moz-border-radius: 15px;
        -moz-box-shadow: 0 0 30px 5px #999;
        -webkit-box-shadow: 0 0 30px 5px #999;
        overflow: hidden;
    }
.profile_image
    {
        float:right; /* this put the div at the right of the .page */
        width:200px /* CHANGE to the image width */
    }