Question

所以我尝试了一天，但我仍然无法做到这一点。我为我的网站创建了一个新的索引页面。我复制了以前主页上的代码。

如果您看到左侧（第一个主页）和右侧（新主页）的滑块。您可以在新主页上看到滑块的行为异常。我无法弄清楚我的CSS为什么会发生这种情况。

我试过这个：

<div id="testimonial">
  <div id="black_title">
    <h1>Bead X Testimonials</h1>

  </div>
  <div class="bx-wrapper" style="max-width: 100%;">
    <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
      <ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
        <li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
          <iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> <a href="#">The Bead X Difference</a>
        </li>
        <li style="float: left; list-style: none; position: relative; width: 248px;">
          <img src="images/test_img.png"> <a href="#">The Bead X Difference</a>

        </li>
        <li style="float: left; list-style: none; position: relative; width: 248px;">
          <iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> <a href="#">The Bead X Difference</a>
        </li>
        <li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
          <img src="images/test_img.png"> <a href="#">The Bead X Difference</a>

        </li>
      </ul>
    </div>
    <div class="bx-controls bx-has-pager">
      <div class="bx-pager bx-default-pager">
        <div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link active">1</a>
        </div>
        <div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a>
        </div>
      </div>
    </div>
  </div>
  <div class="navigation">
    <!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
    <div id="left-prev">
      <a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
    </div>
    <div id="left-next">
      <a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
    </div>
    <div id="read_more"> <a href="#">View all</a>

    </div>
  </div>
</div>

我的意思是，滑块中图像下方的文字溢出，滑块的控件混乱。

但结果仍然很奇怪。如何解决这个问题？

Answer 1

不幸的是，这里有很多问题需要你处理。首先，看起来“Wax Daddys Promise”窗格是宽度为269像素的图像，但是您要对齐的列是275像素，因此它不能正确填充该区域以提供良好的线条。

.testimonial类边距都不合适。

#testimonial {
    text-align: center;
    width: 95%;
    height: 310px;
    background: white;
    border: 4px solid rgb(209, 209, 209);
    margin: 15px 2px 2px 17px;
}

您应该使用：

margin: 15px 0 0 0;

或更好：

margin-top: 15px;

这只是给自己一个顶级缓冲区。如果您对每个推荐类提供相同的内容，或者只是在所有这些上使用class="testimonial"，那么您将获得最高分离。

这应该有所帮助。在未来，您可能需要研究引导程序，使网格布局变得非常简单，而无需深入了解自定义样式。希望有所帮助。

Answer 2

您仍需要进行一些格式化以清理布局，但这可以帮助您解决一些问题：

修改后的CSS：

#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }

另外，在#read_more之后和.bx-controls DIV之后添加一个明确的修复：

<div style="clear: both;"></div>

CSS行为异常

2 个答案: