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;
}
最佳答案
这里最好的解决方案实际上是将图像设置为父元素的背景。
您发送的示例链接通过具有 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>关于html - 如何在不超出屏幕的情况下将图像放在文本旁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41771710/