Float images into overflow without wrapper div

I got some images into a div.

<div>
   <img />
   <img />
   <img />
   <img />
</div>

All images are set to the same height of 50px. The width is set to auto.

The question is, how do i get the images to float left into a horizontal line that reached into the parent div's overflow area. The parent div need a width of 100%.

I want to set the div to overflow-x: scroll. When the images are simply float: left they break into another line if they extend the divs width. But how can I get them into the overflow, so i have to scroll to see the others?

The main problem is that i can't use js or a wrapper div. The problem has to be solved with css.

---

Use white-space: nowrap ; on the container div and display:inline on the img elements.

FIDDLE

<div>
   <img src="http://placehold.it/350x50"/>
   <img src="http://placehold.it/350x50"/>
    <img src="http://placehold.it/350x50"/>
    <img src="http://placehold.it/350x50"/>
</div>

div
{
    white-space:nowrap;
    overflow-x: auto;    
}
img
{
    display: inline;
    margin-right: 10px;   
}

---

TRY this.. i hope this one can help you., Cascsading Syle..

    .float_l { float: left }
    .float_r { float: right }
    .col_w200 {
        overflow: scroll;
        height: 300px;
        width: 200px;
    }

    .lp_frontpage { margin: 0; padding: 0; list-style: none }
    .lp_frontpage li {
        margin: 0;
        padding: 0;
        display: inline
    }
    .lp_frontpage li a {
        float: left;
        display: table;
        width: 200px;
        height: 100px;
        margin: 0 10px 10px 0
    }
    .lp_frontpage li a img { width: 190px; height: 90px; border: 1px solid #3c4445; padding: 4px; }

HTML CODE..

                        <div class="col_w200 float_r">
                        <h2>Web Design Gallery</h2>
          <ul class="lp_frontpage">
                            <li><a href="#"><img width="200" height="100" src="images/_01.jpg" alt="Image 01" /></a></li>
                            <li><a href="#"><img width="200" height="100" src="images/_image_02.jpg" alt="Image 02" /></a></li>
                            <li><a href="#"><img width="200" height="100" src="images/_03.jpg" alt="image 03" /></a></li>
                            <li><a href="#"><img width="200" height="100" src="images/_04.jpg" alt="image 04" /></a></li>
                        </ul>


                    </div>

链接地址: http://www.djcxy.com/p/88450.html

上一篇: 我怎样才能把一个输入元素放在与其标签相同的行上？

下一篇: 浮动图像溢出没有包装div