html - 我的网站的响应式布局有问题

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 的空间，而 width: 30% 值未考虑该空间。您可以添加属性:box-sizing: border-box，这将强制宽度在其计算中包括填充边框尺寸，或者将宽度调整为 width: calc(30% - 30px) 以自己手动计算边框宽度.任何一个选项都会使字幕支架与您并排。