我是 html 和 css 的新手。我写了如下代码。我面临的问题是:一旦浏览器尺寸减小，文本就会与图像重叠。图像的尺寸没有改变。
html代码是:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Favorite app</title>
</head>
<body>
<h1 class="title">MY FAVORITE APP</h1>
<div class="app">
<div class="screenshot"><img src="Images/app.png" alt="This is a screenshot"></div>
<div class="description">Ham hock porchetta mollit corned beef
sed spare ribs aliqua nulla. Mollit ut
tongue qui adipisicing officia sirloin.
Turkey boudin tri-tip minim consequat
pastrami pariatur laborum fugiat nisi
beef ribs in dolore kielbasa sunt. Id cillum
aliquip turkey, ball tip cupidatat pastrami.
Meatloaf in fatback, pariatur ut nulla
reprehenderit jerky t-bone sirloin incidi-</div>
</div>
</body>
</html>
CSS代码是:
.screenshot{
max-width: 460px;
padding-left: 10px;
}
.description{
max-width: 705px;
margin: 30px;
font-size: 30px;
color:#7C8B88;
width:700px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.app{
display: flex;
}
.title{
margin: 30px 10px;
padding: 70px;
padding-left: 10px;
width: 1095px;
height: 100px;
border:20px;
font-size: 50px;
font-family:sans-serif;
background-color: #33BEBE;
color: white;
box-sizing: border-box;
}
最佳答案
让您的图片具有响应性，您所缺少的一切
.screenshot img{
width:100%;
}
P.S:不要为你的 H1 title 添加宽度，否则你会在一瞬间失去响应能力(参见演示)
关于html - 文字与图片重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30039140/