Html 两个盒子不'；他们不能正确地放置自己的位置，但另一个却可以

试图建立一个由不同大小的盒子组成的网站。 我一直在和它混在一起，但最后一件事没能成功

编辑：因此，正如您可以在JSFIDLE中使用se一样，最后两个框从新行开始。我想把它们放在两个mediumNews分区之间和lineNews分区下面。但它们只是开始新的一行。这里有一个简单的绘画说明，以显示我如何想要它

以下是JSFIDLE中使用的代码：

HTML

---

刚好

float:right

这个

div

：

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

在这个的左边

---

“我认为这个JSFiddle会为它自己说话！”它没有。请解释一下这个问题。“盒子式网站”是什么？@j08691我更新了我的第一篇帖子，试图更好地解释你提到的内容。希望现在好多了@卡斯珀：@Notulyses是的，有点像那样！但是，难道没有一个解决方案，我可以应用到“整个代码”吗？我建立这个方法，我可以在任何地方添加任何框，网站将适应，与此不起作用。此外，如果我喜欢缩小，并且在某些缩放时，框中的位置会变得奇怪，只有底部的框有放置问题@卡斯珀：检查我的答案。这也是一个解决方案：）但是，我没有一个解决方案可以应用到“整个代码”中吗？我这样做的方式是，我可以在任何地方添加任何框，而网站将进行调整，这样做是行不通的。如果答案是否定的，我将使用我得到的一些很棒的答案@卡斯珀：就我而言，不可能使用

float

，但你可以期待使用flex或网格布局。如果我是你，我会为每个元素添加两个类：第一个用于外观，第二个用于定位。这也是一个解决方案，但我希望有一些简单的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;
}

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