Question

我有幻灯片显示和html中的内容。

我想删除幻灯片放映下方的空间，以便旁边的内容将接近幻灯片放映的结尾。

我不知道如何移除空间。

如果我给予保证金，幻灯片显示会受到干扰。我应该添加什么？

我该怎么做？

<div class="skdslider">
    <ul id="demo1" class="slides">
<li>
<img src="slides/1.jpg" />
<!--Slider Description example-->
 <div class="slide-desc">
        <h2>Slider Title 1</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
<li><img src="slides/2.jpg" />
   <div class="slide-desc">
        <h2>Slider Title 2</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
<li><img src="slides/3.jpeg" />
<!--NO Description Here-->
</li>
<li><img src="slides/4.jpg" />
  <div class="slide-desc">
        <h2>Slider Title 4</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
<li><img src="slides/5.jpg" /></li>
<li><img src="slides/6.jpg" />
  <div class="slide-desc">
        <h2>Slider Title 6</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
  </div>
</li>
</ul>
</div>

<aside class="top-sidebar">

        <article>
            <h2>DEMO</h2>
            <p><li>DEMO</li>
            <li>DEMO</li>
            <li>DEMO</li>
            <li>DEMO</li></p>
        </article>
    </aside>

    <aside class="top-sidebar">
        <article>
            <h2>DEMO</h2>
            <p>
            <li>DEMO</li>
            <li>IDEMO</li>
            <li>DEMO</li>
            <li>DEMO</li></p>
        </article>
    </aside>

    <aside class="top-sidebar">
        <article>
            <h2>DEMO</h2>
            <p><li>DEMO</li>
            <li>DEMO</li>
            <li>DEMO</li>

</p>
        </article>
    </aside>

Answer 1

滑块底部与aside元素之间的间隙是由h2元素中包含的aside元素的上边距引起的。要解决这个问题，您可以简单地说：

aside h2 {
    margin-top: 0;
}

滑块底部的大间隙是由这种样式引起的：

.skdslider:after {
    ...
    padding-top: 50%;
}

要解决此问题，请完全删除padding-top，然后添加：

.skdslider {
    height: ...;
}

您必须确定滑块的高度，因此请将...替换为您想要的任何内容。

JSFiddle demo

Answer 2

您可以为max-height样式添加skdslider：JSFiddle这样可以删除多余的空格。

.skdslider
{
     width:100%;
     position: relative;
     display: block;
     overflow:hidden;
    max-height: 403px;
}

Answer 3

您需要删除

的填充

.skdslider:after {
    content: '';
    /* padding-top: 50%; */ 
    display: block;
}

并给出最小高度

.skdslider{
 width:100%;
 position: relative;
 display: block;
 overflow:hidden;
 min-height: 558px; /**For have space for slider**/
}

Here is the demo

幻灯片放映前删除空格

3 个答案: