Question

我希望网站有三种不同的格式，具体取决于浏览器窗口的宽度。我的两个媒体查询显示正确。然而，第三个没有。由于某种原因，div中的图像的高度增加很多，并将所有文本推出div。关于图像唯一应该改变的是宽度。这很奇怪，因为div的宽度和边距显示正常，所以我知道媒体查询正在做某事。只是div内的内容没有正确显示。当浏览器的宽度超过1000像素时，就会发生这种情况。

<!DOCTYPE>
<html>
<link rel="stylesheet" href="index.css">
<head>
    <title>Resi</title>
</head>
<body>
    <div id="nav">
            <ul>
                <strong><li style="font-size:26">RESI</li></strong>

                <li>Rent</li>
                <li>List Apartment</li>
                <li>Contact</li>
                <li>Help</li>
                <li>Account</li>
                <div id="logindiv">
                    <li id="signup">Sign In</li>

                </div>
            </ul>
        </div>
     <img src="http://www.ojc.edu/futurestudents/housingandfood/images/D13_Wunsch01.jpg" alt="college dorm" width = 960px height=470px>

        <div id="search">
            <h6 style="color:white" id="searchheader">Resi. Your alternative to dorming.</h6>
            <input class="search-bar" type="text" name="search" placeholder="Search For Your School, Neighborhood, or City..."> <input type="button" value="Search">
        </div>



        <div class="reasons_1">
            <img class="pics" src="http://scottsdalefurnishedapartment.com/wp-content/uploads/2013/10/specialedition.jpg">
            <h3>Get more out of your dorm</h3>
            <p>fdsg zfdga gzszv bzsgfA fdzsbgf zgszza gazff</p>
            <a href="http://www.w3schools.com/tags/tag_a.asp"><p class="learn">Learn more &#9654</p></a>
        </div>
        <div class="reasons_1">
            <img class="pics" src="https://g.foolcdn.com/editorial/images/130138/college_large.jpg" >
            <h3>Save money</h3>
            <p>szhg sfzv hsgfhazf ghfghx fghx dxhfd fgsz gxsg zsfgsz</p>
            <a href="http://www.w3schools.com/tags/tag_a.asp"><p class="learn">Learn more &#9654</p></a>
        </div>
        <div class= "reasons_1">
            <img class="pics" src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2012/7/16/1/CI-Dormify_dorm-room-teens-talking-on-sofa_s4x3.jpg.rend.hgtvcom.231.174.jpeg">
            <h3>Freedom without the worry</h3>
            <p>szfgzgzdf fg sdfgd gfgfgz g fzsg gfg zgfg zz df hj hj </p>
            <a href="http://www.w3schools.com/tags/tag_a.asp"><p class="learn">Learn more &#9654</p></a>

    </div>

    <div id="footer">
        <h2>Terms and conditions</h2>
    </div>

</body>

这就是html，这里是css

body {
width:100%;
margin: 0 auto;
background-color:#f7f7f7;
min-width: 636px;
}
div{

margin: 5px auto;
}

h1{
margin: 0px;
line-height: 70px;
}

#nav{
background-color: #00AAA0;
margin: 0 auto;
width: 100%;
height: 40;
}

li{
float: left;
font-family: sans-serif;
font-size: 16px;
padding: 0px 15px;
display: inline;
line-height: 40px;
height: 40px;
color: white;
}

ul{
margin: 0px;
margin-left: -50px
}

#signup{
float:right;
color: black;
height: 30px;
line-height: 30px;
}

#logindiv,#logindiv:hover{
float:right;
background-color:white;
margin: 5px 15px;
height: 30px;
width: 80px;
cursor: pointer;
}

img{
margin: 0px;
width: 100%;
height: 
}

#search{
margin: 0 auto;
width: 600px;
height: 80px;
position: relative;
left: 0px;
bottom: 130px;
margin-bottom: -85px;
}


#search input[type=text]{
border:1px solid #d0d0d0;
background-color:#fcfcfc;
margin-left: 5px;
}

input[type=button], input[type=button]:hover {
position:relative; 
left:-6px;
bottom: 1px;
background-color:#FF7A5A;
color:white;
cursor: pointer;
height: 30px;
border: hidden;
width: 90px;
font-size: 16px;
margin-top: 5px;
}

.search-bar{
margin: 5px auto;
width: 500px;
height: 30px;
font-size: 16px;
}
#searchheader{
font-size: 30px;

}

h2,h6{
margin: 5px auto;
width:500px;
text-align: center;
font-family: sans-serif;
}


.reasons_1{
float: left;
background-color:white;
margin: 15px;
width: 31%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}

@media only screen and (max-width: 1500px) and (min-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 2%;
width: 29%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
@media only screen and (max-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-left: 5%;
width: 40%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
@media only screen and (max-width: 700px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 14%;
margin-right: 14%;
width: 70%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}

.pics{
height:190px;  
width:100%;
}

h3{
font-family: sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}
p{
font-size: 16px;
line-height: 1.5;
font-family: Circular, Helvetica, Arial, sans-serif;
font-weight: 300;
margin-left: 10px;
margin-right: 10px;
}

#footer{
height: 250px;
background-color: #00AAA0;
color: white;
clear: both;
width: 100%
}

.learn{
position: absolute;
left: 165px;
top: 300px;
}

a{
color: #FF7A5A;
}

此外，这是我的第一个网站，所以任何关于如何让它看起来更好的建议都将不胜感激。

Answer 1

这可能是因为你给出了课程理由_1的宽度

Answer 2

您在顶部的文档类型不能只说doctype 使用

下你需要关闭HTML 查看here以获取DOCTYPE和结束HTML代码

使用这些网站these sites验证您的代码

编辑：我无法发布HTML代码。 :(

为什么我的网站错误地显示我的媒体查询？

2 个答案: