調整瀏覽器大小時圖像不會重排

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

您將max-width設置為30％，請使用媒體查詢在較小的屏幕上將其更改為100％。

調整瀏覽器大小時圖像不會重排

問題描述

1 個解決方案

解決方案1
0 已采納 2016-04-12 20:01:14

調整瀏覽器大小時圖像不會重排

問題描述

1 個解決方案

解決方案1 0 已采納 2016-04-12 20:01:14

解決方案1
0 已采納 2016-04-12 20:01:14