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

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

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

Answer 1

你的 .caption-holder 元素周围有一个 15px 的边框，这增加了 space 的 30px，width: 30% 值没有考虑到。您可以添加属性: box-sizing: border-box，这将强制宽度在其计算中包括填充边框大小，或者将宽度调整为 width: calc(30% - 30px) 以手动计算边框宽度自己。任何一个选项都会使字幕支架与您并排。

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

Having trouble with the responsive layout of my website

html

css

height

width

responsive