0

我已经看到这个问题以多种不同的方式提出，但我只是不明白答案，因为应用程序或场景似乎与我的不同。

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

<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

4

3 回答 3

1

使用媒体查询，您可以为您的 css 元素指定溢出属性。目前尚不清楚您要定位哪个 id 或类，所以我在下面的示例中将其命名为 #your_id。

首先对于低于 940px 的所有内容：

@media only screen and (max-width: 940px) {
body {
overflow-x:visible;
}
}

然后对于 940px 以上的所有内容：

@media only screen and (min-width: 940px) {
body {
overflow-x:hidden;
}
}

在此处了解有关@media 查询的更多信息：http ://webdesign.about.com/od/css3/a/css3-media-queries.htm

于 2013-02-06T22:31:13.800 回答
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;
}
于 2013-02-06T22:24:31.153 回答
1

我正在理解以下两种方式之一：

1）如果您希望您的#slideshow div 没有滚动条，您可以将其溢出属性设置为“隐藏”：

#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;
 }

希望这可以帮助！

于 2013-02-06T22:24:52.000 回答