>  기사  >  웹 프론트엔드  >  怎么让超出div宽度的元素横向滚动?_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:17:491803검색

怎么让超出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;         }

试试。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.