Question

我把一些图片放到了div中。

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

所有图像都设置为50px的相同高度。宽度设置为自动。

问题是，如何让图像向左浮动到达到父div溢出区域的水平线。父div需要100％的宽度。

我想将div设置为overflow-x：scroll。当图像只是浮动时：如果它们扩展了divs宽度，它们会分成另一条线。但是我如何让他们进入溢出，所以我必须滚动才能看到其他人？

主要问题是我不能使用js或包装器div。这个问题必须用css来解决。

Answer 1

使用white-space: nowrap;容器div和img元素上的display:inline。

<强> 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;   
}

Answer 2

尝试这个..我希望这个可以帮到你。，级联风格..

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

将图像浮动到溢出而没有包装div

2 个答案: