Just float:right
this div
:
<div class="mediumNews" style="float:right">
AND TO THE LEFT OF THIS ONE
</div>
質問
Trying to make a website built up by boxes of different sizes. Been mixing a lot with it but can't get this last thing to work.
EDIT: So, as you can se in the JSFiddle, the two last boxes are starting on a new row. I want them to be placed between the two mediumNews DIV and under the lineNews DIV. But they just start a new row. Here is a simple Paint note to show how I want it.
Here is also the code used in the 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;
}
解決
Just float:right
this div
:
<div class="mediumNews" style="float:right">
AND TO THE LEFT OF THIS ONE
</div>