个人中心
gpt4 book ai didi

html - 为什么我的网站不正确地显示我的媒体查询？

转载 作者：行者123 更新时间：2023-11-28 06:05:58 24 4
gpt4 key购买 nike

我希望站点根据浏览器窗口的宽度具有三种不同的格式。我的两个媒体查询正确显示。然而，第三个没有。由于某种原因，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;
}

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

最佳答案

这可能是因为你给类 reasons_1 的宽度

关于html - 为什么我的网站不正确地显示我的媒体查询？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36459822/

24 4 0
文章推荐： javascript - 将 Angular 中的日期格式从 yyyy/MM/dd 更改为 MM/dd/yyyy
文章推荐： ios - 在渲染周期中调用自动布局方法的序列
文章推荐： javascript - 如何使用for循环jquery将相应的值附加到相应的dom元素
文章推荐： c++ - FindFirstFile Windows8 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com