滑块的边距困难

时间：2016-07-25 22:55:51

标签： html css position margin padding

每当我将此滑块放在我正在处理的网站上某个地方时，它就会重叠所有内容。我怎么能根据它的大小设置边距？这样它就不会放在所有东西之上，而是会把事情从它的方式移开。

P.S是的我知道有两个相同的推荐书，我只想要5个以供将来参考，所以我复制了一个。 ：P

以下是codepen的链接。

.test-slider {
  margin: 15% auto;
}
.test-slide {
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  min-width: 25%;
  max-width: 60%;
  animation: test-slider 100s infinite;
  -webkit-animation: test-slider 100s infinite;
  opacity: 0;
}
figure.test div {
  display: inline-block;
  vertical-align: middle;
  padding: 1em 1em 0em 1em;
  margin-bottom: 0.5em;
}
figure.test {
  padding: 1em;
  font-family: lato !important;
  overflow: hidden;
  color: #000000;
  font-size: 1em;
  background-color: #2d2d2d;
  background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0.3em 0.3em 0.3em 0.3em;
}
figure.test h2,
figure.test h4 {
  font-family: lato;
  text-transform: none;
  margin: 0;
}
figure.test h2 {
  font-weight: bold;
  color: white;
}
figure.test h4 {
  font-weight: normal;
  color: #a6a6a6;
}
figure.test img {
  margin-left: 1.5em;
  vertical-align: middle;
  width: 8em;
}
figure.test .img-circle {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
figure.test .img-border {
  border: 0.5em solid tan;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}
figure.test p {
  color: black;
  font: lato;
  margin-left: 2em;
  margin-right: 2em;
  padding: 1em;
  opacity: 1;
  font-style: italic;
  font-size: 1em;
  background-color: white;
  border-radius: 0.3em 0.3em 0.3em 0.3em;
  box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
  text-align: left;
}
figure.test p {
  border: none;
  position: initial;
  content: " ";
  quotes: "\201C""\201D""\2018""\2019";
}
figure.test p:before {
  content: open-quote;
}
figure.test p:after {
  content: close-quote;
}
@keyframes test-slider {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
div.test-slide:nth-child(0) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
div.test-slide:nth-child(1) {
  animation-delay: 20s;
  -webkit-animation-delay: 20s;
}
div.test-slide:nth-child(2) {
  animation-delay: 40s;
  -webkit-animation-delay: 40s;
}
div.test-slide:nth-child(3) {
  animation-delay: 60s;
  -webkit-animation-delay: 60s;
}
div.test-slide:nth-child(4) {
  animation-delay: 80s;
  -webkit-animation-delay: 80s;
}
<div class="test-slider">
  <div class="test-slide">
    <figure class="test">
      <div>
        <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
        <div>
          <h2>John &amp; Sara</h2>
          <h4>Couple</h4>
        </div>
      </div>
      <p>John and I finally had a night to sit down and watch our video! Thank you so much for the absolutely amazing job you both did! We love the video and song choices! We are so happy you guys were able to work with us last min and do our wedding. There
        were so many things that you captured that we had forgotten already and we now have those memories to hold forever! This truly was the best day of our life, thank you for capturing it for us! It means the world!
      </p>
    </figure>
  </div>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Crisbel &amp; Daniel</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Thank you for a job well done regarding the video. From the full video to the highlights and separating the performances. I love how you guys did it. It's really great! We'll definitely recommend your business. You guys exceeded our expectation. :)
    </p>
  </figure>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Kris &amp; Annelise</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Annelise and I love our video. It captured all the highlights, the music was a great choice, and it made us both laugh and cry. Thank you for all the hard work and effort you both put in to making the video.
    </p>
  </figure>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Kris &amp; Annelise</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Annelise and I love our video. It captured all the highlights, the music was a great choice, and it made us both laugh and cry. Thank you for all the hard work and effort you both put in to making the video.
    </p>
  </figure>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Jahmeil &amp; Angel</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Thank you so much Michael and Dora, it was absolutely beautiful! We loved every minute of it. You did a great job interviewing and editing the video to show the highlights of our special day. We have already watched it twice lol the length and content
      are absolutely perfect!
    </p>
  </figure>
</div>

</div>

1 个答案:

答案 0 :(得分：1)

如果我理解正确，您需要使用z-index: -1。此外，您需要将其放在div中并直接将边距设置为它。

如果这没有帮助，请发布网站链接或更新CodePen代码以确切了解错误。

更新：

这可能是一个临时解决方案，但它总比没有好。

你需要：

  • 将position: relative添加到.fl-html div，其中包含滑块div。
  • 将max-width更改为100％或将其从.test-slide div
    • 中删除
  • 在width div。
    • 中将.test-slide更改为100％

然后，您需要使用媒体查询为滑块添加边距，以防止滑块与视频重叠。

为移动，中小屏幕添加样式，它看起来不错。

另外，我想提一下div太多了。如果你正在使用WordPress，那就是.. meh ..它可能会更好，但如果你正在建立一个网站而不是使用WordPress或任何其他CMS，那么我的建议是重新编码整个网站，它将会更容易维护。

祝你好运。

相关问题
最新问题