如何在不超過屏幕的情況下將圖片放在文字旁邊？

Here is the picture i need to embed in the website!我想將圖片放在文本旁邊，但我不知道如何調整邊距以使文本浮動到左側而不會在旁邊留下大的空白區域。另外，可能是因爲圖片太大，網頁不斷超出屏幕區域，瀏覽器會給我滾動條。我應該如何解決這個問題？如何在不超過屏幕的情況下將圖片放在文字旁邊？

我希望它看起來像這樣的網站：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

希望這是你想要達到的目標。

嘗試一下下面的代碼片段。

#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

如何在不超過屏幕的情況下將圖片放在文字旁邊？

回答

相關問題