Question

鉴于两个HTML blob（明确地说它们是什么），我如何使它们彼此相邻？

我看到很多问题对它施加了更多的限制：“它们是div元素”，“使用CSS”，“它们需要漂浮”，“它们应该是相同的宽度”或“有一些比例” 。我想要的就是将它们放在一起。如果屏幕足够宽，它们应该对彼此的内部布局没有影响。我希望它看起来像你将每个屏幕截图作为它自己的页面并将它们粘贴在一起一样。如果屏幕不够宽，它应该做一些合理的事情，包括需要侧面滚动。而且我正在寻找一个合理正确的答案，无论blob是什么。我对CSS没有特别的看法，所以我不在乎它是否被使用，只要它是健壮的，而不是最不好看的。

一个理想的解决方案是由三个字符串组成，这些字符串可以与blob连接并且可以工作：

panelCanvas

如果它可以扩展到更多blob，则获得奖励积分：

concat(Head, blob1, Mid, blob2, Tail)

编辑：激励的情况是：在页面的某个地方，我需要将两个方面放在一边说。我无法控制之前或之后的内容，我对这些事情知之甚少（除了它们在语法上完整）。无论我做什么，都可以在页面中的多个位置完成，甚至可以在我给过的其中一个内容中完成，我不会知道它。除了使用合理的现代浏览器之外，我不做任何假设或要求。

简而言之，任何使用“if”一词的答案，可能都不是我想要的。

Answer 1

你是说这样的意思吗？ http://codepen.io/anon/pen/oXKmaX

<强> HTML

<div id="left"></div>
<div id="right"></div>

<强> CSS

#left{
  background-color: rgb(0,0,0);
  height: 400px;
  width: 400px;
  position: absolute;
  left: 200px;
}
#right{
  background-color: rgb(137,123,10);
  height: 400px;
  width: 400px;
  position: absolute;
  left: 800px;
}

Answer 2

真的唯一的html / css解决方案是让两个div左移，宽度为50％。将内容放入其中。如果您尝试将两个单独的网站并排使用iFrame而不是div。

<div style="float:left; width:50%">left content</div>
<div style="float:left; width:50%">right content</div>

Html布局取决于父窗口的大小，因此您必须对显示内容的容器设置一些约束，这就是您不断看到所引用的限制的原因。

将两位HTML放在一起

2 个答案: