Question

我试图为学校的项目制作一个响应式网站，但是当我缩放网站的宽度时，这个按钮会一直消失。

良好观点：

平板电脑和移动设备视图中

按钮消失：

我该如何解决这个问题？

守则：

<!DOCTYPE html>
<html>
  <head>
    <title>3 Op Reis Second Screen</title>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
    <meta name="description" content="Second screen" />
    <meta name="author" content="Berkay Bayir" />
    <meta name="keywords" content="3opreis second screen" />
    <link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
    <script src="js/script.js" type="text/javascript" async defer></script>
  </head>
  <body>
    <div id="wrapper" data-role="page" class="ui-content">
      <header>
        <img src="image/logotje.png" alt="logo"/>
        <nav id="header" role="header text">
          <ul>
            <h1>3 Op Reis Second Screen App</h1>
          </ul>
        </nav>
      </header>
      <div id="linkerdiv">
        <img src="image/3.png" alt="logo"/>
        <img src="image/4.png" alt="logo"/>
        <p>
          In de aflevering van 15 januari 2017, die zometeen zal beginnen, bezoeken de presentatoren de landen Egypte, Italië en Canada. Ze gaan langs de steden Cairo, San Marino en Toronto.

          Hieronder kun je stemmen wat voor jou het interessant lijkt.
          De resultaten zullen aan het begin van de aflevering op tv getoond worden.

        </p>
        <ul>
          <form id="formulier">
            <h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
            <li><input type="radio" id="poll" name="stemmen" value="1"> Egypte</li>
            <li><input type="radio" id="poll" name="stemmen" value="2"> Italië</li>
            <li><input type="radio" id="poll" name="stemmen" value="3"> Canada</li>
            <input type="button" class="knopje" value="Stem!" onclick="thankYou()">
          </form>
        </ul>
      </div>
      <div id="rechterdiv">
        <div class="w3-container">
          <h2>Zondag 15 januari 2017 om 19.50 uur</h2>
          <p>Bekijk wie welk land bezoekt!</p>
        </div>
        <div class="w3-content w3-display-container">
          <a class="w3-btn-floating w3-hover-dark-grey w3-display-left" onclick="plusDivs(-1)">&#10094;</a>
          <a class="w3-btn-floating w3-hover-dark-grey w3-display-right" onclick="plusDivs(1)">&#10095;</a>
          <div class="w3-display-container mySlides">
            <img src="image/1.png" style="width:100%">
            <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
              Geraldine in San Marino, Italië
            </div>
          </div>
          <div class="w3-display-container mySlides">
            <img src="image/2.png" style="width:100%">
            <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
              Dennis in Cairo, Egypte
            </div>
          </div>
        </div>
        </body>
      </html>

users

Answer 1

导致您问题的原因是您的div #linkerdiv规则将高度定义为500px，因此当屏幕较窄时，其内容会高于此值，并且所有内容都会溢出！

这里有两个选项：

通过将所有屏幕宽度设置为新值来更改高度
对media query进行更改，仅在窄屏幕上更改高度。

我更新了您的代码以使用媒体查询作为示例：

html * {
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: ITC Franklin;
  src: url("ITC_Franklin_Book.otf");
}
h1,
p,
h3 {
  font-family: ITC Franklin;
}
#results img {
  margin-left: 3%;
  margin-top: 6%;
}
#wrapper {
  width: 100%;
  height: 100%;
}
header {
  z-index: 1;
}
header h1 {
  margin-top: 1.5%;
  margin-left: 25.5%;
}
.knopje {
  width: 50%;
  height: 10%;
  border: medium solid grey;
  margin-left: 25%;
}
/* MENU */

#nav li {
  background-color: white;
  height: 50%;
  line-height: 40px;
  list-style: outside none none;
  margin-left: 26%;
  padding-left: 35px;
  padding-right: 35px;
  position: relative;
}
/* body */

body {
  line-height: 1.5em;
  max-width: 100%;
  background-image: url("image/background.jpg");
  background-size: 100%;
}
/* Header */

header {
  background: none repeat scroll 0 0 white;
  border-radius: 15px;
  display: inline-block;
  float: left;
  height: 50px;
  margin: 2.5% 4.5% 3.5% 10%;
  width: 82.5%;
}
header img {
  display: inline;
  margin-left: -3%;
  margin-top: -2%;
  max-width: 100%;
  position: absolute;
  width: 9%;
  z-index: 1;
}
/* Actions screen LINKS */

div #linkerdiv {
  background: none repeat scroll 0 0 white;
  border-radius: 30px;
  display: inline-block;
  float: left;
  height: 500px;
  margin-left: 7.5%;
  margin-top: 0.5%;
  margin-bottom: 3.5%;
  width: 40%;
}
input #poll {
  margin-left: 5%;
}
#linkerdiv img {
  width: 45%;
  height: 40%;
  margin-left: 3%;
  margin-top: 5%;
  max-width: 100%;
  z-index: 1;
}
#linkerdiv p {
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 11pt;
}
#linkerdiv li {
  font-family: ITC Franklin;
  margin-left: 5%;
  list-style: none;
}
h3 {
  margin-left: 5%;
}
textarea {
  border-radius: 30px;
  max-width: 90%;
  width: 90%;
  margin-left: 5%;
  margin-top: 1%;
}
/* Presentatoren div rechts */

div #rechterdiv {
  background: none repeat scroll 0 0 white;
  border-radius: 30px;
  font-family: ITC Franklin;
  display: inline-block;
  float: right;
  height: 500px;
  margin-right: 7.5%;
  margin-top: 0.5%;
  margin-bottom: 3.5%;
  width: 40%;
}
#rechterdiv h2 {
  margin-left: 5%;
  margin-top: 3%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 13pt;
}
#rechterdiv p {
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 11pt;
}
/*BREAKPOINT1*/

/*BREAKPOINT 2*/

@media screen and (max-width: 40em) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }
  header h1 {
    font-size: 1.5em;
  }
  div #linkerdiv {
    background: none repeat scroll 0 0 white;
    border-radius: 30px;
    height: 700px;
    margin-left: 7.5%;
    margin-top: 0.5%;
    margin-bottom: 3.5%;
    width: 87%;
  }
  div #rechterdiv {
    background: none repeat scroll 0 0 white;
    border-radius: 30px;
    float: right;
    height: 500px;
    margin-bottom: 3.5%;
    margin-right: 5.5%;
    margin-top: 0.5%;
    width: 87%;
  }
  #w3-display-container mySlides {
    z-index: 5;
  }
  #w3-btn-floating w3-hover-dark-grey w3-display-right {
    z-index: 10;
  }
  #w3-btn-floating w3-hover-dark-grey w3-display-left {
    z-index: 10;
  }
  header {
    background: none repeat scroll 0 0 white;
    border-radius: 15px;
    display: inline-block;
    float: left;
    height: 75px;
    margin: 2.5% 4.5% 3.5% 10%;
    width: 82.5%;
  }
  header img {
    display: inline;
    margin-left: -7%;
    margin-top: -2%;
    max-width: 100%;
    position: absolute;
    width: 25%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>3 Op Reis Second Screen</title>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="Second screen" />
  <meta name="author" content="Berkay Bayir" />
  <meta name="keywords" content="3opreis second screen" />
  <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="js/script.js" type="text/javascript" async defer></script>

</head>

<body>
  <div id="wrapper" data-role="page" class="ui-content">

    <header>
      <img src="image/logotje.png" alt="logo" />
      <nav id="header" role="header text">

        <ul>

          <h1>3 Op Reis Second Screen App</h1>
        </ul>
      </nav>
    </header>

    <div id="linkerdiv">
      <img src="image/3.png" alt="logo" />
      <img src="image/4.png" alt="logo" />

      <p>
        In de aflevering van 15 januari 2017, die zometeen zal beginnen, bezoeken de presentatoren de landen Egypte, Italië en Canada. Ze gaan langs de steden Cairo, San Marino en Toronto. Hieronder kun je stemmen wat voor jou het interessant lijkt. De resultaten
        zullen aan het begin van de aflevering op tv getoond worden.

      </p>
      <ul>
        <form id="formulier">
          <h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
          <li>
            <input type="radio" id="poll" name="stemmen" value="1">Egypte</li>
          <li>
            <input type="radio" id="poll" name="stemmen" value="2">Italië</li>
          <li>
            <input type="radio" id="poll" name="stemmen" value="3">Canada</li>
          <input type="button" class="knopje" value="Stem!" onclick="thankYou()">
        </form>
      </ul>
    </div>


    <div id="rechterdiv">
      <div class="w3-container">
        <h2>Zondag 15 januari 2017 om 19.50 uur</h2>
        <p>Bekijk wie welk land bezoekt!</p>
      </div>

      <div class="w3-content w3-display-container">

        <a class="w3-btn-floating w3-hover-dark-grey w3-display-left" onclick="plusDivs(-1)">&#10094;</a>
        <a class="w3-btn-floating w3-hover-dark-grey w3-display-right" onclick="plusDivs(1)">&#10095;</a>

        <div class="w3-display-container mySlides">
          <img src="image/1.png" style="width:100%">
          <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            Geraldine in San Marino, Italië
          </div>
        </div>

        <div class="w3-display-container mySlides">
          <img src="image/2.png" style="width:100%">
          <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
            Dennis in Cairo, Egypte
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

您的linkerdiv元素具有固定的高度。调整窗口的大小时，元素的width会逐渐减少，因此元素在垂直轴上占据更多位置。
您应该设置自动高度以将子元素保留在容器中：

#linkerdiv {
    height: auto;
}

我认为你不应该把你的表单元素放在一个列表中，更好的行为就是正确地设置它：

<form id="formulier">
    <h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
    <input type="radio" id="poll" name="stemmen" value="1">Egypte<br>
    <input type="radio" id="poll" name="stemmen" value="2">Italië<br>
    <input type="radio" id="poll" name="stemmen" value="3">Canada<br>
    <input type="button" class="knopje" value="Stem!" onclick="thankYou()">
</form>

你的CSS中的

：

#formulier {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

然后根据需要继续设计样式 MDN - flex box properties (to help you understand the CSS I wrote)

HTML / CSS为什么缩放宽度时按钮会一直消失？

2 个答案: