画面を超えないでテキストの横に画像を配置するにはどうすればよいですか？

Here is the picture i need to embed in the website!テキストの横に画像を配置しようとしていますが、余白を調整してテキストを左に浮かせる方法がわかりません。また、画像が大きすぎるため、Webページが画面領域を超えてしまい、ブラウザが下にスクロールバーを表示してしまう可能性があります。これをどのように解決すればよいですか？画面を超えないでテキストの横に画像を配置するにはどうすればよいですか？

私はそれがこのウェブサイトのようになりたい：ここhttp://alexbudak.com/#first

は私のコードです：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title> Larry Rosenburg Official Website </title> 
     <link rel="stylesheet" href="style.css"> 
     <link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet"> 
    </head> 

    <body> 
     <header> 
      <div id="logo"> 
       <img src ="lincoln.jpg" width ="30%" alt="Lincoln logo" id="logo_picture"> 
       <nav> 
        <ul> 
         <li> <a href="index.html"> Home </a> </li> 
         <li> <a href="lincoln.html"> Lincoln </a> </li> 
         <li> <a href="about.html"> About </a> </li> 
         <li> <a href="contact.html"> Contact </a> </li> 
        </ul> 
       </nav> 

      </div> 
     </header> 


     <div id="name"> 
      <p> 
       Larry Rosenburg 
      </p> 
     </div> 
     <div id="profile-pic"> 
      <img src="placeholder.jpg" width="30%" alt="" > 
     </div> 


    </body> 

    <footer> 
    </footer> 

</html>

そして、ここでは、CSSです：

#logo_picture{ 
    margin-left: 80px; 
} 

#logo img, #logo nav{ 
    float: left; 
} 
#logo nav{ 
    line-height: 120px; 
    margin-left: 250px; 
} 
nav ul{ 
    list-style: none; 
    margin: 0 10px; 
    padding: 0; 

} 

nav li{ 
    display: inline; 
} 

nav a{ 
    color: black; 
    font-size: 20px; 
    font-family:'Arsenal', 'sans-serif'; 
    font-weight: 300; 
    padding: 2px 38px; 
    text-decoration:none; 
} 

nav a, nav a:visited { 
    color: black; 
} 

nav a.selected, nav a:hover{ 
    color: grey; 
} 


    #name{ 
     margin: 100px 500px 0 10%; 
     font-size: 59px; 
     font-family: 'Anton', 'sans-serif'; 
     float: left; 
     max-width: 500px; 

    } 

    #profile-pic{ 
     margin: 0; 
     padding: 0; 
    }

出典

2017-01-20 Kat

ここに最善の解決策は、実際にありますイメージを親要素の背景として設定します。

あなたが送ったリンク例は、imgという要素を持っていますが、それを隠してsrc属性を使用することで何か畳み込まれています。

ただし、ブラウザのサイズを変更すると、小さな画面で画像とテキストが重なって表示されます。したがって、それらは隣接する要素ではなく、テキストと背景です。

#name{ 
 
    background: url(https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/55c0b5abe4b0ec33f39abc7e/1438692796595/Try+1.jpg); 
 
    background-size: cover; 
 
    background-position: 50% 40%; 
 
    height: 300px; 
 
} 
 

 
#name p{ 
 
    margin: 100px 500px 0 10%; 
 
    font-size: 59px; 
 
    font-family: 'Anton', 'sans-serif'; 
 
    max-width: 500px; 
 
}

<div id="name"> 
 
    <p> 
 
     Larry Rosenburg 
 
    </p> 
 
</div>

出典

2017-01-20 20:31:32

それは私のヘッダーでは動作しません。それらを配置するためにマージンを調整する方法はありますか？ – Kat

ヘッダーはどこですか？あいつら誰"？ –

ここにすべてがあります： – Kat

希望これはあなたが達成したいものです。

次のスニペットを1回お試しください。

#imageContainer { 
 
    height: 500px; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
#image { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
#image img { 
 
    float: right; 
 
} 
 
#nameContainer { 
 
    position: relative; 
 
}

<div id="imageContainer"> 
 
    <div id="image"> 
 
    <img src="http://www.mobileswall.com/wp-content/uploads/2015/12/300-Merry-Christmas-Minions-l.jpg"></img> 
 
    </div> 
 
</div> 
 
<div id="nameContainer"> 
 
    <p> 
 
    Hi i'm Nikhilesh 
 
    </p> 
 
</div>

出典

2017-01-20 20:38:13

画面を超えないでテキストの横に画像を配置するにはどうすればよいですか？

答えて

関連する問題