How to make elements that exceed the width of a div scroll horizontally?_html/css_WEB-ITnose

How to make elements that exceed the width of a div scroll horizontally?

Reply to discussion (solution)

Set the css style of the container div
Horizontal scrolling overflow-y:auto ;
Vertical scrolling overflow-x:auto;
Of course you have to set the width of the container div.

Try setting the overflow attribute

Try setting the overflow attribute

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

This is only vertical.

The following is the css html code , help me take a look.

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

A 540px wide picture is placed in a 560px wide div. This way of writing scrolls vertically.
overflow-x, overflow-y, I've also tried it.

How come a horizontal scroll bar appears when the width of your image does not exceed the width of the container? The author can try changing

        #content        {            width: 560px;            height: 220px;            overflow:auto;         }

to

        #content        {            width: 460px;            height: 220px;            overflow:auto;         }

.