尝试制作一个由不同大小的盒子组成的网站。 一直在与它混合,但无法使最后一件事起作用。
编辑:因此,正如您在 JSFiddle 中看到的那样,最后两个框在新行上开始。我希望将它们放在两个 mediumNews DIV 之间和 lineNews DIV 之下。但他们只是开始新的一行。这是一个简单的 Paint note 来展示我想要它的方式。
这也是 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;
}
最佳答案
只是 float:right
这个 div
:
<div class="mediumNews" style="float:right">
AND TO THE LEFT OF THIS ONE
</div>
关于html - 两个盒子没有正确放置自己,但另一个盒子可以,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23372893/