(我是一个新手,请保持温柔)

我的图片漂浮在新的一行上,而不是停留在一行上,
当我更改窗口大小时。

我怎样才能保持同一行的价格?

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-boxesnews类中!!

删除不必要的CSS,这是另一种方法=> http://jsfiddle.net/zV7FC/1/

10-05 20:42
查看更多