ページの右側にイメージを置く

私はこのウェブページをHTMLとCSSで持っており、私はこのコンタクトページを持っています。しかし、私はページの右側に置いて、このイメージを持っていますが、私が行う場合：float: right;それは動作していないようです。私も整列しようとしましたが、明らかにそれに近い唯一のものはtext-alignです。必要な場合は、ここに私のコード（HTML）である： CherryPlaysRoblox ページの右側にイメージを置く

</head> 
<body> 
    <div class="outer"> 
<ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="gallery.html">Gallery</a></li> 
    <li><a href="contact.html">Contact</a></li> 
     <p id="Cherry">CherryPlaysRoblox1</p> 
</ul> 
<div class="jumbotron"> 
<h1>Contact</h1> 
<h4>Here are a few ways you can contact me. I will update the page when I change anything.</h4> 
    </div> 
</div> 

<!-- EMAIL --> 
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4> 
<!-- TWITTER --> 
<img src="_twitter.png.png" alt="twitter" height="35" width="35"> <h4>Username</h4> 
<!-- FACEBOOK --> 
<img src="_facebook.png" alt="facebook" height="35" width="35"> <h4>Username</h4> 
<!-- INSTAGRAM --> 
<img src="_instagram.png" alt="instagram" height="35" width="35"> <h4>Username</h4> 
<!-- ME --> 
<div id="PhotoOfMe"> 
    <img src="_Cherry.png" alt="Me" id="Me"> 
</div> 
</body> 
</html>

そして、私のCSSコード：

#Cherry { 
    color: black; 
    font-family: 'Happy Monkey', cursive; 
    font-size: 20px; 
}  
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: DarkOrchid; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}  
li { 
    float: left; 
    border-right: 1px solid White; 
}  
li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
}  
li a:hover { 
    background-color: PaleVioletRed; 
}  
.active { 
    background-color: PaleVioletRed; 
}  
/*JUMBOTRON*/ 
.jumbotron { 
    background-color: Sandybrown !important; 
    float: top; 
}  
.jumbotron, p + h1 { 
    color: black !important; 
    font-family: 'Happy Monkey', cursive; 
} 
/*BODY*/ 
body { 
    background-color: Peachpuff !important; 
}  
h2 { 
    font-family: 'Happy Monkey', cursive !important; 
} 
h4 {  
}  
#me { 
    float: right; 
    clear: right; 
}

は私が得ることができるすべての助けをいただければと思います！

出典

2016-11-05 CherryPlaysRoblox

の可能性のある重複した[右CSS HTMLを使用してイメージを揃える]（http://stackoverflow.com/questions/5214893/right-align -an-image-using-css-html） –

正しい浮動のためには、ドキュメントの後ろにあるものに浮動小数点が表示されますので、コンテナを#emailの上に置くと、右側に配置されます。またあなたのHTMLでは、IDは大文字のMeであり、CSSでは小文字の#meでした。

だから、一番上にプッシュし、小文字にそれを変更：

... 
<!-- ME --> 
<div id="PhotoOfMe"> 
    <img src="_Cherry.png" alt="Me" id="me"> 
</div> 
<!-- EMAIL --> 
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4> 
...

出典

2016-11-05 22:27:55 ilwcss

ありがとうございました！それは実際に働いた！またもう1つの質問：あなたが何かを浮かべている場合、そのアイテムは真ん中の身体の何かの前にある必要がありますか？ – CherryPlaysRoblox

あなたを大歓迎します。それが浮かぶ要素の前にある必要があります。 MDN https://developer.mozilla.org/en/docs/Web/CSS/floatで例を見つけることができます。また、複数の列レイアウトを作成する方が簡単なので、CSSのフレックスボックスを調べることをお勧めします。https://css-tricks.com/snippets/css/a-guide-to-flexbox – ilwcss

Ahhhh！本当にありがとう！私はそれを完全にチェックします！ – CherryPlaysRoblox

ページの右側にイメージを置く

答えて

関連する問題