浮动图像溢出没有包装div
我将一些图像分成了一个div。
<div>
<img />
<img />
<img />
<img />
</div>
所有图像都设置为50px的相同高度。 宽度设置为自动。
问题是，我如何让图像左移到达到父div的溢出区域的水平线中。 父div需要100％的宽度。
我想将div设置为overflow-x：scroll。 当图像是简单的float：left时，如果它们扩展div的宽度，则它们会分成另一行。 但是我怎么才能让他们进入溢出状态，所以我必须滚动才能看到其他人？
主要问题是我不能使用js或包装div。 这个问题必须用css来解决。
使用white-space: nowrap ; 在容器div上display:inline在img元素上display:inline 。
小提琴
<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;
}
试试这个..我希望这个可以帮助你。，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>