水平布局

Question

我正在尝试使用自动分页创建水平tumblr主题的问题。我使用非常简单的表格进行布局：

<table><tr>
    <!--each post is here--><td></td><!--To here-->
</tr></table>

但这是问题所在。用于自动分页的Javascript工作非常简单。你必须将帖子放入div，但你不能将div放入tr或table。如果我将整个表放在div中，水平布局自然会中断。知道如何解决这个问题吗？

<div class="repeating-div">    
    <table><tr>
        <!--each post is here--><td></td><!--To here-->
    </tr></table>
</div>

编辑：它的外部脚本不是由我编写的，因此我必须将class放在div而不是row上，我真的不想花时间编写新的javascript代码

Answer 1

将display:inline-block添加到您的DIV中。使用此属性，多个DIV将相互容忍，水平。

不建议将表用于非tabulair数据。如果您想为元素添加“表格行为”（外观），请使用display:table加display:table-row和/或display:table-cell。

Answer 2

使用内联div和white-space：nowrap在包装器div上。内容浮动到右边，并且永远不会破坏。

Answer 3

在块元素上使用display:inline-block在IE 6-7中不起作用。它只适用于内联元素。

如果这是一个问题，你可以浮动你的div来达到同样的效果。