0

问题解决问题的演示

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

编辑： 现在我需要的是一种方法，这样这些 div 在行为相同的同时不会像这样交互

首先，一张图片： 参考图像

现在一些代码：

所以我有两个 div 使用这个 CSS 并排放置：

.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 网格（单击此处了解更多信息），并且由于某种原因，接下来的行和列中的所有其他 div 都被第一个的内容向下推（我认为）让我感到困惑的是滑块在 iframe 内有一个阴影，右边的 div 似乎从它的中间开始。无论如何，他们为什么不排成一个正常的，而不是偏移的网格。

4

4 回答 4

1

我相信你vertical-align:top在.horizontal课堂上不见了

更新的小提琴

于 2013-08-19T04:51:23.760 回答
0

尝试使用float:leftandfloat:right而不是display:inline-block

于 2013-08-16T06:42:32.920 回答
0

尝试改变宽度：

.horizontal{ width:50%; }

假设你想要 2 列。

于 2013-08-18T05:25:27.230 回答
0

这是你想要的？小提琴

有两件事需要修改。

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

p {
    display:inline-block;
}

2）HTML（只需删除divs之间的空格

</div><div...
<!-- no space above -->
于 2013-08-18T05:32:54.597 回答