html - 两个盒子没有正确放置自己，但另一个盒子可以

Question

尝试制作一个由不同大小的盒子组成的网站。一直在与它混合，但无法使最后一件事起作用。

编辑:因此，正如您在 JSFiddle 中看到的那样，最后两个框在新行上开始。我希望将它们放在两个 mediumNews DIV 之间和 lineNews DIV 之下。但他们只是开始新的一行。这是一个简单的 Paint note 来展示我想要它的方式。

Image of how I want it to be.

JSFiddle Here!

这也是 JSFiddle 中使用的代码:

HTML

    <div id="wrapNews">
    <div class="bigNews">
    L
    </div>

    <div class="mediumNews">
    M
    </div>

    <div class="lineNews">
    L
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="mediumNews">
    THEY SHOULD BE TO THE RIGHT OF THIS ONE...
    </div>

    <div class="lineNews">
    AND UNDER THIS ONE...
    </div>

    <div class="mediumNews">
    AND TO THE LEFT OF THIS ONE
    </div>

    <div class="smallNews">
    THIS BOX IS WRONG
    </div>

    <div class="smallNews">
    AND THIS ONE TO
    </div>  
</div>

CSS

* {
    padding: 0;
    margin: 0;
    outline: 1px solid red;
}

body {
background-image: url('bg3.jpg');
font-family: Helvetica;
}

#header {
width: 900px;
margin: 0 auto;
}

#wrapNews {
width: 920px;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.lineWrap {
overflow: hidden;
}

.smallNews {
display: inline-block;
width: 210px;
height: 200px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin: 10px;
}

.lineNews {
display: inline-block;
width: 440px;
height: 200px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin: 10px;
}

.mediumNews {
display: inline-block;
width: 210px;
height: 420px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin: 10px;
}

.bigNews {
display: inline-block;
width: 900px;
height: 400px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin:10px;
}

Answer 1

只是 float:right 这个 div :

<div class="mediumNews" style="float:right">
    AND TO THE LEFT OF THIS ONE
</div>

Example