Question

（我是一个新手 - 所以要温柔）

我的图片浮动到一个新行，而不是停留在一行，当我改变窗口大小时。

如何将中断保持在同一条线上？

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代码，即字体大小而不是字体大小）

Answer 1

Float ed元素占用可用的视口区域以进行扩展，因此当您调整大小时，视口宽度会减小，因此它们会换行换行，以避免这种情况

你可以做两件事：

<强>第一

将white-space:nowrap添加到home-boxes类，这样可以避免图像在下一行中换行。

删除不必要的css，这是一种方式=＆gt; http://jsfiddle.net/zV7FC/

<强>第二

您可以随后将display:inline-block添加到home-boxes和news课程中。

删除不必要的css，这是另一种方式=＆gt;的 http://jsfiddle.net/zV7FC/1/

Answer 2

您也可以在宽度上指定%，而不是修复它。

http://jsfiddle.net/62UN9/2/

.news
    {
    position: relative;
    float:left;
    height:auto;
    width:25%;
}

如何让图像浮动在同一行？

2 个答案: