Question

我看到这个问题提出了许多不同的方法，但我只是不理解答案，因为应用程序或场景似乎与我的不同。

基本上我的内容宽度为940px，我想使用'画架'作为幻灯片的背景，但画架图像延伸大约400px PAST，内容宽度为940px，导致水平滚动条显示在940px +画架宽度（400px） - 但我希望滚动条仅在内容为940px或更低时显示 - 是否有一个简单的修复我可以忽略？

<div id="showcase">
            <div class="content">
                <div class="left">
                    <h1>Lidya Aaghia Tchakerian</h1>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </p>
                </div>

                <div id="slideshowArea">
                    <div id="slideshow">
                        <ul class="bjqs">
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                            <li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

我的css：

 /* showcase
------------------------------------------*/
#showcase {
    position: relative;
    padding: 40px 0 0 0;
    height: 828px;
    background: #fafafa;
    border: 1px solid #d8d8d8;
}

#showcase .left {
    position: absolute;
    width: 388px;
    top: 200px;
    text-align: center;
}

#showcase .left  h1 {
    color: #cd6d6d;
}

#slideshowArea {    
    position: absolute;
    width: 824px;
    left: 495px;
    height: 875px;
    background: url('../images/easel.png') no-repeat;
}

#slideshow {
    display: block;
    position: relative;
    left: 72px;
    height: 534px;
    width: 326px;
    border: none;
    top: 107px;
}

#slideshow ul {
    position: relative;
    z-index: 99;
    width: 326px;

}

ul .traits {
    padding: 0;
    float: left;
    margin: 10px 0 0 30px;
}

.traits li {
    color: #fff;
    float: left;
    display: block;
    margin-right: 25px;
    padding: 6px 0 0 22px;
    background: url('../images/checkbox.png') no-repeat 0 0;
    height: 30px;
    list-style: none;
}

非常感谢任何和所有帮助。

谢谢，森

编辑：查看页面访问http://www.digicrest.com/lidya

Answer 1

也许这就是：

#slideshowArea {    
  position: absolute;
  width: 824px;
  max-width: 940px;
  overflow-x: hidden; /* Maybe overflow-y instead ?? */
  left: 495px;
  height: 875px;
  background: url('../images/easel.png') no-repeat;
}

Answer 2

我理解这两种方式之一：

1）如果您希望#slideshow div没有滚动条，可以将它的overflow属性设置为'hidden'：

#slideshow {
display: block;
position: relative;
left: 72px;
height: 534px;
width: 326px;
border: none;
top: 107px;
overflow-x: hidden; /*ADD THIS*/

}

2）我理解这一点的另一种方式是你有一个带有画架背景图像的div，它应该“保持”你的#slideshow div，但那个背景图像超出了它所需的尺寸。如果您使用固定设计，一种解决方案是将背景图像设置为容器div的大小，这样您就可以知道事物的位置或多或少。

另一种解决方案是使用CSS background-size属性;如果你想让你的背景宽度为940px，你可以这样做：

 #container {
     background: url('directory/file.jpg');
     background-size: 940px auto;
 }

希望这有帮助！

当div超出我的内容宽度时，如何防止水平滚动条显示？

2 个答案: