放置圖像

所以我是新來的整個HTML CSS編程。我正在開發一個簡單的網站來展示我的簡歷。我想在我的主要內容的右側放置一張圖片。我想把它放在那裏，以便我最終能夠點擊我的名字，並使用Jquery滑出，但我似乎無法將它放在我的主內容右側10px左右。這是我的網站。放置圖像

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

而這裏的主要內容和圖像

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的CSS - 恢復內容的任何有用的提示，將是有益的太對你CS僱主那裏;）

來源

2012-03-16 sean-hill

所以你的簡歷說你知道HTML和CSS，mhhh？：P – 2012-03-16 21:08:17

作爲通過簡歷篩選出來的人， – ceejayoz 2012-03-16 21:10:33

我不是100％確定你想要最終結果。但'float：right'將相對於文檔的'body'。您可能想要放入頁面。 – 2012-03-16 21:10:45

歡迎來到SO，sean.daryl！

你可以通過把啓動profile_image div你page div裏面，像這樣

<hr> 

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

<!--EDUCATION-->

這樣，圖像被包含在圓盒中。（假設這是你想要的。）

來源

2012-03-16 21:07:22

好的，我從你的評論中看到你想放置的地方。爲什麼？你想做什麼？ – 2012-03-16 21:30:27

我的最終目標是能夠點擊我的名字，並使用jQuery在那裏彈出該圖像。 – 2012-03-16 21:33:51

您應該考慮在某種類型的燈箱中打開圖像。如果屏幕尺寸很小或者在移動設備上查看它，那麼出現在側面將無法正常工作。 – 2012-03-16 21:39:56

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

enter image description here

使用Firebug的Mozilla

來源

2012-03-16 21:11:17 zod

我試過了，但如果你水平調整窗口的大小，它會搞砸 – 2012-03-16 21:18:08

因爲你必須爲該div設置固定寬度 – zod 2012-03-19 14:27:59

這應該工作，你想：

.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; 
}

來源

2012-03-16 22:04:27 algi

這個工程指定.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 */ 
    }

來源

2012-03-16 22:13:05 7ictor

回答

相關問題