首頁 > web前端 > html教學 > 怎么让超出div宽度的元素横向滚动?_html/css_WEB-ITnose

怎么让超出div宽度的元素横向滚动?_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:17:49
原創
1889 人瀏覽過

怎么让超出div宽度的元素横向滚动?


回复讨论(解决方案)

设置容器div的css样式
横向滚动 overflow-y:auto;
纵向滚动 overflow-x:auto;
当然你还得设置容器div的宽度。

设置overflow属性试试

设置overflow属性试试

        #tar1, #tar2, #tar3        {            width: 540px;            height: 220px;        }        #content        {            width: 560px;            height: 220px;            overflow: auto;        }    <div id="content">        <div id="tar1" style="background-image: url(/1.jpg)">        </div>        <div id="tar2" style="background-image: url(/2.jpg)">        </div>        <div id="tar3" style="background-image: url(/3.jpg)">        </div>    </div>
登入後複製


这样只是纵向的.

以下是css+html代码,帮忙看看吧.

        #tar1, #tar2, #tar3        {            width: 540px;            height: 220px;        }        #content        {            width: 560px;            height: 220px;            overflow:auto;         }    <div id="content">        <div id="tar1" style="background-image: url(/funny/1.jpg)">        </div>        <div id="tar2" style="background-image: url(/funny/2.jpg)">        </div>        <div id="tar3" style="background-image: url(/funny/3.jpg)">        </div>    </div>
登入後複製

540px宽的图,放在一个560px宽的div里面,这么个写法,是纵向的滚动的.
overflow-x,overflow-y,我也试过了.

你图片的宽度都没有超过容器的宽度怎么会出现横向滚动条啊?楼主可以把

        #content        {            width: 560px;            height: 220px;            overflow:auto;         }
登入後複製

改成
        #content        {            width: 460px;            height: 220px;            overflow:auto;         }
登入後複製

试试。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板