从监视器更改为移动视图时，div部分的文本和其他部分流出了吗？

编程问答 2022-08-15

问题描述

当我将页面的视图从监视器或横向视图更改为移动视图时，在类别为slider的div部分中添加了所有滑块代码之后，我试图将滑块添加到Web应用程序中div部分中的文本流出该部分。 这是我的滑块HTML代码：

@import url("https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway");

h1 {
  display: block;
  font-size: 3em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

h5 {
  color: #ffffff;
  font-size: 2em;
  margin-top: 1px;
  font-style: italic;
}

label {
  cursor: pointer;
}
.slider {
  height: 20vw;
  overflow: hidden;
  text-align: center;
  background-color: #47d7ed;
  border-radius: 5px;
}
.slider > ul {
  height: 100%;
  z-index: 100;
}
.slider > ul > li {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
  transition: all 2000ms ease;
}
.slider > #input-slide-0:checked ~ ul > li.slide-0,.slider > #input-slide-1:checked ~ ul > li.slide-1,.slider > #input-slide-2:checked ~ ul > li.slide-2,.slider > #input-slide-3:checked ~ ul > li.slide-3 {
  opacity: 1;
  z-index: 2;
}
.slider > ul > li.slide-0 {
  background-color: #47d7ed;
}
.slider > ul > li.slide-1 {
  background-color: #47d7ed;
}
.slider > ul > li.slide-2 {
  background-color: #47d7ed;
}
.slider > ul > li.slide-3 {
  background-color: #47d7ed;
}
.slider > .slider-dot {
  position: relative;
  margin-top: -4vw;
  text-align: center;
  z-index: 300;
  font-size: 0;
}
.slider > .slider-dot > label {
  position: relative;
  display: inline-block;
  margin: 1vw 0.5vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;

  background-color: #fff;
}
.slider > #input-slide-0:checked ~ .slider-dot > label.slide-0,.slider > #input-slide-1:checked ~ .slider-dot > label.slide-1,.slider > #input-slide-2:checked ~ .slider-dot > label.slide-2,.slider > #input-slide-3:checked ~ .slider-dot > label.slide-3 {
  background-color: black;
}
.slider > .slider-dot > label:hover {
  background-color: #f73c3f !important;
}
.slider > .slide-description {
  position: absolute;
  width: 50%;
  top: calc(18% - 3vw);
  left: 25%;
  z-index: 200;
}

.slider > .slide-description > label {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  cursor: default;

  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.75s ease;
}
.slider > #input-slide-0:checked ~ .slide-description > .slide-0,.slider > #input-slide-1:checked ~ .slide-description > .slide-1,.slider > #input-slide-2:checked ~ .slide-description > .slide-2,.slider > #input-slide-3:checked ~ .slide-description > .slide-3 {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}
.slider > .slide-description > label > .text-slide {
  margin: 0 auto;
  line-height: 6vw;
  top: 0px;
}

@keyframes slide {
  0%,100% {
      opacity: 0;
  }
  6%,25% {
      opacity: 1;
      z-index: 2;
  }
  30%,50% {
      opacity: 0;
      z-index: 2;
  }
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-0 {
  animation: slide 32000ms infinite -2000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-1 {
  animation: slide 32000ms infinite 6000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-2 {
  animation: slide 32000ms infinite 14000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-3 {
  animation: slide 32000ms infinite 22000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li {
  transition: none;
}

@keyframes arrow {
  0%,24% {
      z-index: 1;
  }
  25%,100% {
      z-index: -1;
  }
}

@keyframes dot {
  0%,24% {
      background-color: #333;
  }
  25%,100% {
      background: #fff;
  }
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-0 {
  animation: dot 32000ms infinite -2000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-1 {
  animation: dot 32000ms infinite 6000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-2 {
  animation: dot 32000ms infinite 14000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-3 {
  animation: dot 32000ms infinite 22000ms;
}

@keyframes description {
  0%,5% {
      opacity: 0;
      z-index: 2;
      visibility: visible;
  }
  6%,24% {
      opacity: 1;
      z-index: 2;
      visibility: visible;
  }
  25%,100% {
      opacity: 0;
      z-index: 0;
      visibility: hidden;
  }
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-0 {
  animation: description 32000ms infinite -2000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-1 {
  animation: description 32000ms infinite 6000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-2 {
  animation: description 32000ms infinite 14000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-3 {
  animation: description 32000ms infinite 22000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > label {
  transition: none;
}

.readmorebutton {
  text-decoration: none !important;
  padding: 4px;
  color: #fff;
  background-color: #c10e0e;
  display: inline-block;
  margin: 4px 0;
  border-radius: 3px;
  width: 80px;
  font-weight: bold;  
}
.readmorebutton:hover {
  color:rgb(149,255,0);
}
input {
  display: none;
}
<div class="slider">
    <input name="input-slider" id="input-slide-0" type="radio" class="input-slide input-slide-num" />
    <input name="input-slider" id="input-slide-1" type="radio" class="input-slide input-slide-num" />
    <input name="input-slider" id="input-slide-2" type="radio" class="input-slide input-slide-num" />
    <input name="input-slider" id="input-slide-3" type="radio" class="input-slide input-slide-num" />
    <input name="input-slider" id="input-slide-autoplay" type="radio" class="input-slide" checked />
    <ul>
        <li class="slide-0"></li>
        <li class="slide-1"></li>
        <li class="slide-2"></li>
        <li class="slide-3"></li>
    </ul>
    <div class="slide-description">
        <label class="slide-0">
            <h1 class="text-slide">Lorem Ipsum</h1>
            <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
            <a href="/" class="readmorebutton">Read More</a>
        </label>
        <label class="slide-1">
            <h1 class="text-slide">Lorem Ipsum</h1>
            <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
            <a href="/" class="readmorebutton">Read More</a>
        </label>
        <label class="slide-2">
            <h1 class="text-slide">Lorem Ipsum</h1>
            <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
            <a href="/" class="readmorebutton">Read More</a>
        </label>
        <label class="slide-3">
            <h1 class="text-slide">Lorem Ipsum</h1>
            <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
            <a href="/" class="readmorebutton">Read More</a>
        </label>
    </div>
    <div class="slider-dot">
        <label class="slide-0" for="input-slide-0"></label>
        <label class="slide-1" for="input-slide-1"></label>
        <label class="slide-2" for="input-slide-2"></label>
        <label class="slide-3" for="input-slide-3"></label>
    </div>
  </div>

当页面处于横向模式时，它看起来像这样：-

enter image description here

现在，当我将视图模式更改为“移动”视图时，结果如下所示：-

enter image description here

所有文本都从该div部分中流出并流到各处，如何规定代码的该部分仅显示在同一部分内？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlslider