div在同一条线上或一条在另一条线之上

Question

我正在尝试在Internet Explorer 8中解决此问题。

我有两个div标记，其内容应显示在同一行。我知道我可以使用inline-block轻松实现这一目标。但是，我还想要，如果浏览器窗口缩小到内容不再适合某一行的位置，则第二个div的内容将移动到下面一行。

基本上我正在寻找这种行为“如果有足够的空间则在同一行显示两个项目，否则转到下一个”。

有没有办法用IE8实现这个目标？即使是Javascript解决方案也没问题。

Answer 1

尝试在两个div上使用style="float:left"。您可能需要将它们包装在另一个div中以获得您正在寻找的效果。

Answer 2

您可以使用媒体查询来检查屏幕宽度，并根据以下内容更改样式：

@media(min-width:768px) { //div style here }

在这里查看：

http://jsfiddle.net/b9ahqnt0/

Answer 3

以及向左浮动尝试添加百分比作为宽度，因此当屏幕尺寸减小时，它可以调整。虽然通常在响应式网站上你最好设置它然后调整问题，因为丹尼尔说使用@media条件来改变布局，因为屏幕变为你需要的样子......