html - 防止我的图像在较小尺寸的屏幕上出现在我的 div 后面

问题描述

我在一个更大尺寸的显示器上工作，并在我的笔记本电脑上打开我的网站时立即意识到，我的图像没有在我的 div 旁边调整其自身大小，而是将其自身置于下面？我应该怎么办？？

我已经尝试在网上找到答案，但没有太多运气，该网站似乎或运行完美，基本上只在我的显示器上，但任何较小的东西，照片开始在文本下方。

我对这一切都很陌生，在锁定时学习新技能，所以不要猛烈抨击任何糟糕的代码都在努力解决这个问题

    html, body {
    	background-color: #fffaee;
    	background-attachment: fixed; 
    	-webkit-background-size: cover; 
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	font-family: 'Josefin Slab', serif;
    }
    
    #container {
    	position: fixed;
    	float: left;
    	background: ;
    	width: 424px;
    	color: #000000;
    	padding: 15px
    }
    
    h1 {
    	font-size: 4vw
    }
    
    h2{
    	background: #75c1f6;
    	color:black;
    	padding: 5px;
    	border-radius: 5px;
    }
    
    p{
    	font-size: 20px
    }
    
    a {
    	color:#75c1f6;
    	text-decoration: none; 
    }
    
    footer {
    	position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
    }
    #man {
    	float: right;
    }

    <html lang="en">
              <head>
    	

    <meta charset="utf-8">
        	<meta name="keywords" content="prank, pigeons, old man, interactive, art, teague, portfolio">
        	<meta name="description" content="Frank loves to feed pigeons on his bench this is where he stays">
    
    		<title>Frank</title>
    		<link rel="shortcut icon" type="image/jpg" href="images/favicon.png">
    		<link rel="stylesheet" href="css/normalize.css">
    		<link rel="stylesheet" href="css/style.css">
    		<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@700&display=swap" rel="stylesheet">
    </head>
    
    <body>
    	<div id="wrapper"></div>
    	<div id="container">
    	
    <h1>This Is Frank...</h1>
    <h2></h2>
    	<P>Franks best friend is a pigeon.</P>
    
    	<P>Frank wakes up every morning puts on his loafs and heads to the park to feed his friend.</P>
    
    	<P>You've seen the old man on the park bench almost everyday while on your commute to work.</P>
    
    	<p>One day while walking to work you stop to ask the old man how he's doing. He mumbles "His 
    	name is Roger, help me feed him!" </p>		
    	</div>
    
    	<div id="man">
    		<img src="images/grandpasmall.gif" alt="Old man on bench">
    	</div>
    
    	<footer>
    		<a href="https://www.instagram.com/zed.head/" target="_blank">
    			<img src="images/social-insta.png" alt="instagram">
    			</a>
    	</footer>
    </body>
    </html>

标签： htmlcssimage

html - 防止我的图像在较小尺寸的屏幕上出现在我的 div 后面

问题描述

解决方案

推荐阅读