Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-24 12:17:49
original
1859 Les gens l'ont consulté

怎么让超出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>
Copier après la connexion


这样只是纵向的.

以下是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>
Copier après la connexion

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

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

        #content        {            width: 560px;            height: 220px;            overflow:auto;         }
Copier après la connexion

改成
        #content        {            width: 460px;            height: 220px;            overflow:auto;         }
Copier après la connexion

试试。

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal