Question

我想制作带侧面字幕的幻灯片。我希望幻灯片显示屏幕的 70％宽度，以及屏幕宽度 30％的字幕。我希望两者调整到任何屏幕大小。此外，两个元素的高度必须 100％高度。

这是我的CSS和HTML：

/*Slidetrack*/
#slidetrack{
  overflow: hidden;
  width: 100%;
}

#slider{
  width:70%;
  overflow: hidden;
  float: left;
}

#slide1 {
  width: auto;
  height: auto;
}

#caption-holder{
  color: #000;
  background: #fff;
  border: #e6e6e6 15px solid;
  width: 30%;
  overflow: hidden;
  float: left;
}

.dot{


}

.caption {

}

.caption h1, p{

}

.fade {

}

<main id="slidetrack">

      <div id="slider">
      <div id="slide1"><img src="img/tennis.jpg"></div>
      <div id="slide2"></div>
      <div id="slide3"></div>
      </div>

      <div id="caption-holder">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>

        <div class="caption">
          <h1>Lorep Ipsum</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="caption">
          <h1>Lorep Ipsum</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="caption">
          <h1>Lorep Ipsum</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>

    </main>

This is a screenshot of what I'm getting

这个网站上的幻灯片正是我想做的，但我的是“全屏”：http://design-milk.com/

Answer 1

你的.caption-holder元素周围有15px的边框，这增加了30px的空间，宽度不计入：30％的值。您可以添加属性：box-sizing：border-box，它将强制宽度在其计算中包含填充边框大小，或者将宽度调整为宽度：calc（30％ - 30px）以手动自行计算边框宽度。任何一个选项都会使标题持有者与您并排。

我的网站的响应式布局出现问题

1 个答案: