右侧的<div>被左侧<div> </div> </div>的内容推低

Question

Demo of Problem
Kind of Solved Problem

它只是解决了，因为我希望能够拥有不同大小内容的div

修改 现在我需要的是一种方法，使这些div不会像这样进行交互，而行为方式相同

首先是图片

现在有些代码：

所以我有两个用这个CSS彼此相邻的div：

.horizontal {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
display: inline-block;
overflow: hidden;

左边的div有一个间隔符：

.tspacer {
width:100%;
height:110px;

然后它有一个iFrame，这是左边div的HTML：

<div id="home" class="horizontal" style="font-family: 'Press Start 2P', cursive;">
<center><img src="img/light.png" class="home-light" /></center>
<div class="tspacer"></div>
<iframe src="iframe/home_slider.html" width="100%" height="300px" frameborder="0"></iframe>
</div>

右边的div只有一些文字：

<div id="ent" class="horizontal" style="background-color:#F00">
Entertainment
</div>

最后，我需要什么：

我需要将娱乐div捕捉到页面顶部。这个页面包含一个div网格（Click here for more on that），由于某种原因，下一行和列中的所有其他div都被第一行的内容推下来（我认为）令我困惑的是， slide在iframe中有一个阴影，右边的div似乎从中间开始。无论如何，为什么他们不会在正常而非偏移的网格中排队。

Answer 1

我相信你的vertical-align:top课程中缺少.horizontal

<强> Updated fiddle

Answer 2

尝试使用float:left和float:right代替display:inline-block

Answer 3

尝试更改宽度：

.horizontal{ width:50%; }

假设你想要2列。

Answer 4

这是你在找什么？ Fiddle

有两件事需要修改。

1）CSS（p导致间距问题，因为它设置为block）

p {
    display:inline-block;
}

2）HTML（只删除div s

之间的空格

</div><div...
<!-- no space above -->