Как разместить изображение рядом с текстом, не выходя из экрана?

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

Как разместить изображение рядом с текстом, не выходя из экрана?

ответ

Смежные вопросы