Question

当调整浏览器大小时，我的代码中的三个图像保持不变。我希望他们能够移动并堆叠起来。我很难弄明白，任何帮助都会非常感激。

这是我的代码（我是新手）：

<!DOCTYPE html>
<title>Bad Doc</title>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
@media only screen and (max-width: 320px) {
    body {
        background-color: lightblue;
    }
}

.body {
    margin: 0;
    padding: 0;
}

a.item:hover { 
    background-color: gray;
}

a:link {
    text-decoration: none;
}

p {
    font-family: "Garamond", Times, serif;
}

.wrapper {
    border: 1px solid blue;
    padding: 1px;


}
.thing1 {
    border: 1px solid blue; 
    float: left;

}

.content {
    border: 1px solid blue; 
    overflow: auto;

    }

h1 {
    font-size: 72px;
    text-align: center;
    margin: 0 0 20px 0;
    font-family: "Garamond", Times, serif;
}

ul {
    margin-right: 10px;
    padding: 0 20px 0 20px;
}

li {
    list-style-type:none;
    font-family: "Garamond", Times, serif;
    font-size: 14px;
}

.photos {
    display: inline;
}

img {
    max-width: 30%;
    height: auto;
    opacity: 0.7;
    filter: alpha(opacity=70); 

}   

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); 
}

#footer p {
    text-align: center;
    font-size: 14px;
}

</style>
</head>

<body>

<div class="wrapper">
    <h1>gage</h1>


<div class="thing1">
    <UL>
        <li><a class="item" href=" ">about</a></li>
        <li><a class="item" href=" ">contact</a></li>
    </ul>
</div>


<div class="content"> 
    <div class="photos">
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
    </div>

</div>

<div id="footer">
    <P>More stuff</p>
</div>

</div>




</body>
</html>

Answer 1

您将Queue设置为30％，使用媒体查询在较小的屏幕上将其更改为100％。

调整浏览器大小时图像不会回流

1 个答案: