Question

我添加的滑动库存在一些问题：

按钮卡在图库下方而不是侧面。（我试着给他们'display：inline-block'（？））。
我想将#gallrey div分为2个，其中包含#slideGallery和#galleryDescription。 div #galleryDescription包含<p>，它停留在底部而不是顶部或中心。

这是我希望#gallery拥有的格式：

[左按钮] [＃slideGallery DIV] [右按钮] [＃galleryDescription DIV]

希望您能理解我。：）

这是我的代码：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

.mySlides {
  height: 300px;
  width: 300px;
}

#gallery {
  width: 620px;
  border: 1px solid black;
  margin: 0 auto;
}

#gallerySlide {
  display: inline-block;
  width: 49%;
  top: 0;
  left: 0;
}

#galleryDescription {
  display: inline-block;
  width: 49%;
  top: 0;
  right: 0;
}

#glryDesc {
  /* (glryDesc = gallery description)  */
  padding-left: 5px;
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="gallery">
  <div id="gallerySlide">
    <img class="mySlides" src="images/slide1.png" />
    <img class="mySlides" src="images/slide2.png" />
    <img class="mySlides" src="images/slide3.jpg" />
    <img class="mySlides" src="images/slide4.jpg" />

    <button class="btn" onclick="plusDivs(-1)">&#10094;</button>
    <button class="btn" onclick="plusDivs(1)">&#10095;</button>

  </div>
  <div id="galleryDescription">
    <p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
  </div>
</div>

Answer 1

这是您想要的吗？

您有太多相互矛盾的width。我不得不在不同的尺寸上做出一些妥协。尝试自己调整它们。

left，top和right是属性，不适用于没有特定position集（relative，{{1} }或absolute）。默认位置为fixed。

我使用了static容器和flex，justify-content来相应地对齐项目。阅读它们。

align-items

var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";  
    }
    x[slideIndex-1].style.display = "block";  
}

.mySlides {
  height: 280px;
  width: 280px;
  display: none;
}

#gallery{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 660px;
  border: 1px solid black;
  margin:0 auto;
}

#gallerySlide {
  display: flex;
  width: 49%;
}

#glryDesc { /* (glryDesc = gallery description)  */
  padding-left: 5px;
}

我的幻灯片库出现问题

1 个答案: