Question

尝试通过不同大小的盒子构建网站。与它混合很多但却无法完成最后的工作。

编辑：所以，正如你可以在JSFiddle中那样，最后两个框开始于新行。我希望它们被放置在两个mediaNews DIV和lineNews DIV之间。但他们刚开始新的一行。这是一个简单的油漆笔记，以显示我想要它。

这里也是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

两个盒子不能正确放置，但另一个盒子没有

1 个答案: