(我是一个新手,请保持温柔)
我的图片漂浮在新的一行上,而不是停留在一行上,
当我更改窗口大小时。
我怎样才能保持同一行的价格?
html
<div class="home-boxes">
<article class="news" >
<img class="new-img" src="man.png" >
<span class="main-title">NEWS</span>
</article>
<article class="news" >
<img class="new-img" src="kids2.png" >
<span class="main-title">KIDS</span>
</article>
<article class="news" >
<img class="new-img" src="babys.png" >
<span class="main-title">BABIES</span>
</article>
<article class="news" >
<img class="new-img" src="noamt.png" >
<span class="main-title">BABIES</span>
</article>
</div>
的CSS
div.home-boxes {
position: relative;
width: 1584px;
overflow: auto;
width: 100%;
font-size: 40px;
line-height: 40px;
color: #fff;
font-family: Impact;
overflow-x: scroll;
overflow: auto;
}
.news {
position: relative;
left: 0px;
top: 0px;
float: left;
height: 396px;
width: 396px;
display: inline;
}
(请注意:以前的帖子编辑破坏了一些CSS代码,即font-size而不是font-size)
最佳答案
Float
ed元素占据了可用的视口区域以进行扩展,因此在调整大小时,视口宽度会减小,因此它们会换行,以免出现这种情况
您可以做两件事:
第一
要么将white-space:nowrap
添加到home-boxes
类,这样就可以避免图像换行。
删除不必要的CSS,这是一种方法=> http://jsfiddle.net/zV7FC/
第二
您可以随后将display:inline-block
添加到home-boxes
和news
类中!!
删除不必要的CSS,这是另一种方法=> http://jsfiddle.net/zV7FC/1/