奇怪的浮箱发出

如果我用下面的代码：奇怪的浮箱发出

<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>

我会用它CSS没有问题，但作为未来的发展，我有一个预感未来的浏览器会贬值多个表功能。我试图达到同样的事情，但用DIV标签和CSS，我希望把它与旧的Web浏览器，如Internet Explorer 7兼容

这是我的代码有：

CSS：

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

HTML：

<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 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>

我在Firefox 15测试了它和800x600的我自然桌面大小歌剧11.6和箱子排队正确。当我在两个浏览器中使用缩放工具缩小以模拟1024x768屏幕时，最后两个框不会并排排列。它更像是一个3行两列的网格，有些部分缺失。不过，我下降了50％的缩放比例（模拟1600x1200的屏幕）并且盒子的排列是正确的。

每个方块都包含可变数量的文本。

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

来源

2016-02-16 Mike

你尝试过使用'Media Query'吗？ – Pedram

不，但我会尝试额外divs – Mike

我会使用视口的一切。它们的优势在于它们消除了整个可视区域，无论它是否是父母或孩子的元素。因此，您可以创建一个完全响应的网页。

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

这样的事情会使它更具适应性。你只需要确保你的父“div”为100vw。

来源

2016-02-16 06:18:20

除了我不认为IE7支持，也不做其他旧的网页浏览器。 – Mike

我解决这个：

<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的一行，因此再也不必担心有搞砸了箱子。我只需要注意的一点是，在这个版本中，使用不同颜色的边框将显示顶部和底部框之间穿过的线条。

来源

2016-02-16 06:33:03 Mike

奇怪的浮箱发出

回答

相关问题