Question

到目前为止，这是我的代码。当我让屏幕变小时，我希望它放在我左边的标识下面。先谢谢你们！

@media screen and (max-width:959px){

    #wrapper{
        width: 100%;
    }

    #Search{
    width:40em;
    height: 3em;
}

}

@media screen and (max-width:640px)
{

    #Search{
    width:100%;

}
}



<!DOCTYPE html>
<html>
<head>
    <title>Shiny Science</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script src="js.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="wrapper">
    <header>
        <img id="mainLogo" src="images/mainlogo.jpg">
        <select id="Select">
            <option value="0">Menu</option>
            <option value="1">Home</option>
            <option value="2">Contact Us</option>
            <option value="3">About Us</option>
        </select>

    </header>
<main>
    <h1>Shiny Science</h1>
    <p id="description">Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta. Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta</p>
    <div id="searchbox">
    <img src="images/monkey.jpg" id="secondaryLogo" alt="logo maybe">
    <input type="text" name="txtSearch" placeholder="Topic Name" id="Search" ><input type="button" name="btnSearch" value="Search" id="searchButton">
    <img src="images/turtle.png" alt="somethingkidscience" id="secondaryLogo2">
    </div>
</main>
<footer>
    <div id="ep1">
    <h2>Episode 1</h2>
    <p class="caption">Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta</p>
    <iframe  src="https://www.youtube.com/watch?v=W3s7UWpo35s?autoplay=1"><p>Your browser doesn't support iframe</p></iframe>
</div>
<div id="ep2">
    <h2>Episode 2</h2>
    <p class="caption">Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta</p>
    <iframe src="https://www.youtube.com/watch?v=W3s7UWpo35s"><p>Your browser doesn't support iframe</p></iframe>
</div><br>
<a href="http://www.youtube.com">View all episodes</a>
</footer>

</div>

</body>
</html>

对不起伙计们，我已经更新了这个现在有html和css我正在使用

body{
    font-family: Arial, Verdana, sans-serif;
    font-size: 1.3em; 
    background: linear-gradient(red, yellow) repeat;
    text-align: center;
    color: #fff;
}
header{
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 1em;
}

main,footer,header{
    border-bottom: 2px solid red;
    padding-bottom: 2em;
    text-align: center;
}

.caption{
    font-size: 0.5em;
}

#ep1, #ep2{
    display: inline-block;
    margin-left: 5em;
    margin-right: 5em;
}

#wrapper{
    margin: auto;
    width: 80%;
    background: linear-gradient(cyan,red);
}

#secondaryLogo{
    width: 15%;
}
#searchbox{
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-items: center;
}

#Search{
    width:40em;
    height: 3em;
}

#contactHeader{
    padding-top: 1em;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 2em;
    overflow:auto;
}

h1, #description{
    margin: auto;
    width: 80%;
}


input[type=text], textarea{
    width:50%;
    float: left;
}

input[type=submit]{

}

#searchButton{
    height: 3em;
}


#mainLogo{
    width: 30%;
    margin-left: 25%;
}

#secondaryLogo2{
    float: right;
    width: 15%;
}

#us{
    width: 10%;
}

label{
    float: left;
    text-align: right;
    width: 35%;
    margin-right: 5%;
}

select{
    font-size: 1em;
    text-align: center;
}


#contactForm{
    width: 49%;
    border-right: 2px solid white;
    float: left;
    height: 30%;
}
#contactMethod{
    float: left;
    text-align: left;
    padding-left: 3em;
}

@media screen and (max-width:959px){

    #wrapper{
        width: 100%;
    }

    #Search{
    width:40em;
    height: 3em;
}

}

@media screen and (max-width:640px)
{

    #Search{
    width:100%; 
    height:150px;
    float:left;
}


img {
  width: 100%;
    max-width: 400px;
    height: auto;
}

}

我一直在尝试使用查询进行不同的操作，但是现在唯一可行的是当我将屏幕缩小时包装器的更改。

Answer 1

将此内容放在@media屏幕和（max-width：640px）部分中：

(
"1,1,2,3,5,8,13\n" # numbers to the Fibonnaci sequence
"1,4,9,16,25,36,49\n" # numbers of the square number sequence
"1,1,2,5,14,42,132,429" # numbers in the Catalan number sequence
)

您必须停止#searchbox成为弹性框才能让子div显示为块，否则它们将继续显示为flex子级。当屏幕宽度变小时，我会在代码中看到很多其他问题，但这是您要求任何人解决的唯一问题：）

使用媒体查询响应搜索框？

1 个答案: