1

我将一些图像放入一个 div 中。

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

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

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

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

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

4

2 回答 2

2

使用white-space: nowrap；在容器 div 和display:inlineimg 元素上。

小提琴

<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;   
}
于 2013-07-14T10:55:00.883 回答
0

试试这个.. 我希望这个可以帮助你., 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 代码..

                        <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>
于 2013-07-14T10:57:54.390 回答