Question

无论屏幕大小如何，我都很难将按钮保持在标志下方并保持在相同位置。我在使它具有移动响应能力方面也遇到了问题。

我一直在尝试使用不同的CSS位置，并在不同的位置添加按钮以将其放置在标志下。至于响应性，我尝试添加媒体查询并添加最大宽度。都没有。

  box-sizing: boarder-box;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

.container {
  display: flex;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flag-container {
  display: absolute;
  width: 80vw;
  height: 80vh;
}

.american-flag {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 260px;
  width: 450px;
  background-color: #B31C31;
}

.american-flag:after {
  content: '';
  top: 20px;
  height: 20px;
  width: 450px;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 40px 0 0 #fff,
              0 80px 0 0 #fff,
              0 120px 0 0 #fff,
              0 160px 0 0 #fff,
              0 200px 0 0 #fff;
}

.american-flag:before {
  content: '★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \ ★ ★ ★ ★ ★ ★';
  font-size: 19px;
  padding: 10px 0 0 8px;
  letter-spacing: 3px;
  line-height: 13px;
  color: #fff;
  position: absolute;
  background-color: #39386E;
  width: 180px;
  height: 130px;
  z-index: 1;
}

.btn-container {
  position: relative;
  text-align: center;
  margin-top: 30px;
}

.btn {
  height: 40px;
  width: 230px;
  background: #fff;
  border: #B31C31 solid 2px;
  border-radius: 10px;
  color: #39386E;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.btn:hover {opacity: 0.6}

/* Fireworks */
@-webkit-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0px;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

@-moz-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

#stage {
  position: relative;
  height: 100vh;
  background-color: #000028;
}

.launcher {
  position: absolute;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  background: #fff;
  border-bottom: 3px solid yellow;
}

.launcher div {
  position: absolute;
  opacity: 0;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 4px;
  border-right: 4px solid yellow;
  border-radius: 2px;
  -webkit-animation-name: explosion;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: explosion;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}```


The expected outcome was to have the button under the flag and the whole site to be mobile responsive.

    ```<div id="stage">
        <div class="container">
         <div class="flag-container">
          <div class="american-flag"></div>
          <div>
            <div class="btn-container">
            <input type="button" class="btn" id="btn" value="Happy 
            Birthday, America!!!"  onclick="play(), btnHide()">
            <audio id="audio" 
 src="http://lcweb2.loc.gov/natlib/ihas/service/ssbanner/100010509/100010509.mp3" ></audio>
        </div>
      </div>
    </div>```

Answer 1

您的第一行似乎有错字。

即框大小：寄宿生-框； //它应该是边框-框

Answer 2

尝试这种方式

.container {
  display: flex;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.american-flag {
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 260px;
  width: 450px;
  background-color: #B31C31;
}

.american-flag:after {
  content: '';
  top: 20px;
  height: 20px;
  width: 450px;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 40px 0 0 #fff, 0 80px 0 0 #fff, 0 120px 0 0 #fff, 0 160px 0 0 #fff, 0 200px 0 0 #fff;
}

.american-flag:before {
  content: '★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \ ★ ★ ★ ★ ★ ★';
  font-size: 19px;
  padding: 10px 0 0 8px;
  letter-spacing: 3px;
  line-height: 13px;
  color: #fff;
  position: absolute;
  background-color: #39386E;
  width: 180px;
  height: 130px;
  z-index: 1;
}

.btn-container {
  position: relative;
  text-align: center;
  margin-top: 30px;
}

.btn {
  height: 40px;
  width: 230px;
  background: #fff;
  border: #B31C31 solid 2px;
  border-radius: 10px;
  color: #39386E;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.6
}


/* Fireworks */

@-webkit-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0px;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

@-moz-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

#stage {
  position: relative;
  background-color: #000028;
}

.launcher {
  position: absolute;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  background: #fff;
  border-bottom: 3px solid yellow;
}

.launcher div {
  position: absolute;
  opacity: 0;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 4px;
  border-right: 4px solid yellow;
  border-radius: 2px;
  -webkit-animation-name: explosion;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: explosion;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div id="stage">
  <div class="container">
    <div class="flag-container">
      <div class="american-flag"></div>
      <div>
        <div class="btn-container">
          <input type="button" class="btn" id="btn" value="Happy Birthday, America!!!" onclick="play(), btnHide()">
          <audio id="audio" src="http://lcweb2.loc.gov/natlib/ihas/service/ssbanner/100010509/100010509.mp3"></audio>
        </div>
      </div>
    </div>

这是一种相对简单的布局，不需要position:absolute;

如何将按钮放置在标志下并使页面响应

2 个答案: