Question

您好，并提前感谢您的帮助。我正在研究网站的以下组件：

div内容延伸超过1990px，但我希望它根据屏幕尺寸切断。因此，如果用户的屏幕大小为1200，则他们只会看到1200px的div。

现在div内容扩展到1990px所以它创建了一个sidescroll。我不想使用像＆＃34; overflow-x：hidden＆＃34;这样的房产。因为这会损害可用性并且不允许用户在较小的屏幕上滚动。

我希望这个div的行为与CSS背景图像非常相似，因为它只会显示用户屏幕尺寸所显示的内容。

我对这项技术感到困惑，并且从未这样做过，所以非常感谢任何提示和专业知识。

干杯！

Answer 1

仅使用CSS，您可以做两件事：

1）如果屏幕没有宽度，则使滚动条出现在容器div上，使用overflow-x：scroll;在#top-photo-wrap div中：

http://jsfiddle.net/k7b3K/

#top-photo-wrap {
background:#000;
/*height:204px;*/
font-family: 'Open Sans Condensed Bold', sans-serif;
overflow-x:scroll; /* Makes the scroll bar horizontal appear*/
width:100%;
}

2）让div成为＆＃34; cutted＆＃34;使用overflow-x：hidden;到屏幕的宽度，没有显示更多内容在#top-photo-wrap div中：

http://jsfiddle.net/DvCJZ/1/

#top-photo-wrap {
background:#000;
/*height:204px;*/
font-family: 'Open Sans Condensed Bold', sans-serif;
overflow-x:hide; /* Makes the scroll bar horizontal desapear*/
width:100%;
 }

我不清楚为什么你不想使用溢出属性......我错过了什么吗？：/

1996px div只显示屏幕大小？

1 个答案: