浮动在相对内联块div内的绝对div内

Question

希望有人可以帮我解决这个问题，我已经搜索过但找不到有同样问题的人。

我正在重新浏览我网站的菜单，我需要将这些.float-columns显示在彼此旁边，但在这个设置中它们会相互显示。

.main{
	display: inline-block;
	position:relative;}

.content {
    position: absolute;
}
.float-column  {
	background: #FFF000;
    float:left;
}

<div class="main">
<div class="content">
<div class="float-column">Column 1</div>
<div class="float-column">Column 2</div>
</div>
</div>

我可以通过从.content中删除位置或从.main中删除位置/显示来使它们按预期显示，但遗憾的是我无法执行此操作，因为它会破坏菜单的其余部分。

在为.float-column和.content指定固定宽度时，我的成功有限，但理想情况下我想保持灵活性（因此我可以根据需要添加任意数量的列）

这有什么办法吗？我错过了一些明显的东西吗？

干杯！

JSFIDDLE

Answer 1

根据您的要求，您只需要从主类中删除内联块。这将使列并排排列。