html - 模拟灵活宽度

Question

我想实现页脚。这里的主要思想是，当窗口变窄时，页脚内的文本应该隐藏，但如果窗口变得足够宽，则页脚内的所有文本都应该可见。你能帮帮我吗？

例如，如果我有这样的标记，那么即使窗口变得足够宽，文本也会始终被隐藏。但如果页脚内的文本也可见，那应该会更好。

<style type="text/css">
#topbar { width: 100%; }
#topbar div { white-space: nowrap; overflow: hidden; width:70px; text-overflow: ellipsis;}
#topright div { text-align: right; }
</style>
<table id="topbar">
<tr>
  <td><div>Item1Item1</div></td>
  <td><div>Item2Item2Item2</div></td>
  <td><div>Item3Item3Item3Item3</div></td>
  <td><div>Item4Item4Item4Item4</div></td>
  <td><div>Item5Item5Item5Item5Item5Item5Item5</div></td>
  <td id="topright"><div>ItemRightItemRightItemRight</div></td>
</tr>
</table>

提前致谢。

Answer 1

您可以为此使用 CSS3 媒体查询。请参阅此文档了解宽度:http://www.w3.org/TR/css3-mediaqueries/#width

您基本上要做的是为不同的屏幕宽度(例如小于/大于 800 像素)定义两个或多个不同的样式表(至少部分)，执行如下操作:

.large-content{
    display: none;
}
@media screen and (min-width: 800px){
    .large-content{
    display: block;
    }
}

Google 还应引导您找到有关此主题的大量有用资源。