Question

如果我使用以下代码：

import android.support.v7.app.NotificationCompat;
.
.
.
NotificationCompat.Builder mBuilder =  new NotificationCompat.Builder(getContext());

mBuilder.setSmallIcon(R.drawable.icon1)
   .setContentTitle("My notification")
   .setContentText("Hello World!");

我对使用CSS没有任何问题，但随着未来的发展，我会有一种直觉感觉未来的浏览器会折旧更多的表功能。我正在尝试使用DIV标签和CSS来实现相同的功能，并且我希望它与旧版Web浏览器（如Internet Explorer 7）兼容。

这是我的代码：

CSS：

<table>
    <tr><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td></tr><tr><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td></tr>
</table>

HTML：

.stretch{width:100%;overflow:hidden}
.common{float:left;margin:0.2em;padding:0.1em;width:40%}

我在firefox 15和opera 11.6上测试了它，我的自然桌面大小为800x600，盒子排列正确。当我在两个浏览器中使用缩放工具缩小以模拟1024x768屏幕时，最后两个框不会并排对齐。它更像是一个3行乘两列的网格，缺少一些部分。但是，我降低了50％的变焦（模拟1600x1200的屏幕）并且盒子排列正确。

每个框包含可变数量的文本。

为什么会发生这种情况，是否有办法解决这个问题，或者我是否必须返回使用表格？

Answer 1

我正在解决这个问题：

<div ID="outer" class="stretch">
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
</div>
<div ID="outer2" class="stretch">
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
</div>

这对我来说效果最好，因为每个盒子只有一行div，因此永远不必担心盒子搞砸了。我唯一需要注意的是，在这个版本中，使用不同颜色的边框将显示在顶部和底部框之间穿过的线。

Answer 2

我会将视口用于一切。优点是它们可以在总可视区域内工作，无论它是否是父元素或子元素。因此，您可以创建一个完全响应的网页。

.stretch{width:100%;overflow:hidden}
.common{float:left;margin:0.5vh;padding:0.5vh;width:40vw}

这样的东西会使它更具适应性。你只需要确保你的父div为＆＃34; row＆＃34;是100vw。

奇怪的浮箱问题

2 个答案: