在响应显示中保持两个元素内联

Question

我正在尝试创建一个由四个并排组成的条带，当在响应式屏幕上显示时，它将变成两个两个。我使用了两个带有2列的表，但是我遇到了宽度问题。试图添加widht：100％;但没有效果。尝试用跨度替换表格，但在重新调整屏幕大小时，它们会叠加在另一个上面。

我的网站网址为here，您可以在主页上看到这四个框。

在Chrome上它看起来不错，但在任何其他浏览器上它都会耗尽框架。

这是我用来构建表格的代码：

<div style="margin-left: -7px;">
    <table dir="rtl" align="center">
        <tbody>
            <tr>
                <td>
                    <div class="greyboxhp">
                        <p style="text-align: center;" dir="rtl"><span style="color: #000000;"><a href="#"><span style="color: #000000;">Box 1</span> </a>
                            </span>
                        </p>
                        <p style="text-align: center;" dir="rtl">
                            <a href="#"><img src="images/fields/Field1.png" alt="Field1" />
                            </a>
                        </p>
                    </div>
                    <p class="readmore" style="text-align: center; margin-top: -17px;">
                        <a class="btn" href="/index.php/page1"> <span class="icon-chevron-right"></span> Read more... </a>
                    </p>
                </td>
                <td>
                    <div class="greyboxhp" style="margin-right: 10px;">
                        <p style="text-align: center;" dir="rtl"><span style="color: #000000;"><a href="#"><span style="color: #000000;">Box 2</span> </a>
                            </span>
                        </p>
                        <p style="text-align: center;" dir="rtl">
                            <a href="#"><img src="images/fields/Field2.png" alt="Field1" />
                            </a>
                        </p>
                    </div>
                    <p class="readmore" style="text-align: center; margin-top: -17px;">
                        <a class="btn" href="/index.php/page2"> <span class="icon-chevron-right"></span> Read more... </a>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

我认为你正在寻找一种跨浏览器的方式来使<div>的分裂中断也像我在

那样进行下一行

this fiddle

我将它们包装在一个范围内，并使用CSS white-space: nowrap;属性来实现这一点。这比表格更有效。

适用于所有浏览器。希望这有帮助！