Question

我是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;
}

Answer 1

所有你缺少的让你的图像响应

.screenshot img{
    width:100%;
}

jsBin demo

P.S：不要为你的H1 title增加宽度，否则你会在一只眼睛中放松响应（见演示）

Answer 2

也许这可以帮到你。 Codepen sample

代码 HTML：

<h1 class="title">MY FAVORITE APP</h1>
<div class="app">
    <div class="screenshot">
        <img src="http://www.w3.org/html/logo/downloads/HTML5_sticker.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>

和css：

.screenshot{
    max-width: 460px;
    padding-left: 10px;
}
/*This is the part that makes difference*/
.screenshot img{
    width: 100%;
}
.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;
}

文字与图像重叠

2 个答案: