无法使用 div 标签设置固定宽度

我正在尝试制作一个身体宽度为 60% 的图像滑块，HTML 代码如下：

.wrapper {
  width: 80%;
  height: 1000px;
  margin: auto;
}
.slider-wrapper {
  position: absolute;
  width: 60%;
}
.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide1 {
  background-image: url('assets/img/slide1.jpg');
}

<body>
  <div class="wrapper">
    <div class="slider-wrapper">
      <div class="slide slide1">
        <span>slider1</span>
      </div>
      <div class="slide slide2">
        <span>slider1</span>
      </div>
    </div>
  </div>
</body>

但是我设置的背景图像是其容器的整个宽度扩展的，而不是 60%。我想知道我在这里做错了什么？我应该在此处将幻灯片类设置为display:inline属性吗？

试试这个：

.wrapper{
    position: relative;
    width: 60%;
    height: 1000px;
    margin: auto;
}
.slider-wrapper{
    position: absolute;
    width: 100%;
}
.slide{
    position: relative;
    display: inline-block;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slide1{
    background-image: url('assets/img/slide1.jpg');
}

我认为首先您应该为 .slider-wrapper 定义高度，然后在 .slide 中添加宽度：100% 和高度：100%

我认为这可能会解决您的问题。

您的代码对我来说似乎没问题，每张幻灯片都显示 60% 中的 80% 包装器。

如果您参考下面的代码段，灰色.wrapper显示 80% 中的 100%，粉红色图像是显示 60% 中的 80% 包装.slide。

例：

.wrapper{
    width: 80%;
    height: 1000px;
    margin: auto;
    background: grey;
}
     .slider-wrapper{
    position: absolute;
    width: 60%;
    height:100%;
    }
    .slide{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:100%;
}
.slide1{
background-image: url('https://dummyimage.com/600x400/a32da3/fff');
}

<div class="wrapper">
    <div class="slider-wrapper">
        <div class="slide slide1">
            <span>slider1</span>
        </div>
        <div class="slide slide2">
            <span>slider2</span>
        </div>
    </div>
</div>

你的代码工作正常。这里的问题是关于您没有内容来扩展您的.slider-wrapper。此外，您将图像用作背景而不是<img>标签中，因此它没有足够的空间来显示您的背景图像。因此，您必须height设置为您的.slider-wrapper或使用某些内容进行更新，如下面的代码片段所示。

.wrapper {
  width: 80%;
  height: 1000px;
  margin: auto;
}
.slider-wrapper {
  position: absolute;
  width: 60%;  
}
.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide1 {
  background-image: url('https://ak.picdn.net/assets/cms/97e1dd3f8a3ecb81356fe754a1a113f31b6dbfd4-stock-photo-photo-of-a-common-kingfisher-alcedo-atthis-adult-male-perched-on-a-lichen-covered-branch-107647640.jpg');/*dummy image*/
}

<body>
  <div class="wrapper">
    <div class="slider-wrapper">
      <div class="slide slide1">
        <span>slider1</span>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
      </div>
      <div class="slide slide2">
        <span>slider2</span>
      </div>
    </div>
  </div>
</body>

相关内容

最新更新

热门标签：