Html 并排堆叠div而不使用float left

我想将

div

（2个

div

放在一行中）并排堆叠

50%

width，而不使用

float:left

，因为它会将

div

从正常流中取出<代码>Flexbox也不是首选，因为浏览器支持有限。如何在不更改宽度的情况下获得所需的视图

我的代码

*，*：之前，*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
}
上校{
显示：内联块；
宽度：50%；
}
.col内容{
填充：0.5em；
背景色：#ddd；
边框：1px实心#aaa；
颜色：#333；
}

col项目1


第2项


第3项


第4项

奇怪但真实-您可以从HTML中删除元素之间的空格-如下所示：

*，
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
}
上校{
显示：内联块；
宽度：50%；
}
.col内容{
填充：0.5em；
背景色：#ddd；
边框：1px实心#aaa；
颜色：#333；
}

col项目1


第2项


第3项


第4项

删除col div结束标记和开始标记之间的空格

例如：

<div class="col">
    <p class="col-content">
      col Item 1
    </p>
</div>
<div class="col">
    <p class="col-content">
      col Item 2
    </p>
</div>

col项目1


第2项


第3项


第4项

您的意思是div不会低于另一个div。您想要水平滚动条？尝试内联显示？请查看并将@ketan Yes，div侧向放置。那是一排两个div。不低于一another@Webie我想西德洛克西隆给出了答案。非正统的方式。但仍然工作完美。但是如果我尝试使用HTML代码，问题似乎会再次出现。只要内联块的宽度是容器宽度的一半，就可以了。我希望行中有2个div。

<div class="col">
    <p class="col-content">
      col Item 1
    </p>
</div><div class="col">
    <p class="col-content">
      col Item 2
    </p>
</div>