如何获得这个页脚效果

Question

我想知道当屏幕变小时，这个主题如何让右下方的项目消失。

http://themeforest.net/item/jr-photography-wordpress-theme/full_screen_preview/1163891?ref=takeaction

我的右下方有物品，但是当屏幕太小时，它们向下移动而不是像这样消失。任何评论或链接如何获得这种效果将是伟大的！谢谢。

Answer 1

不是媒体，而是CSS浮动解决方案

我还没有检查过特定网站的源代码，你是否正在进行链接，但我已经创建了一个简单的CSS解决方案，当没有更多内容时，它会隐藏右侧元素由于左手边的元素，他们的空间。

Here is a JSFiddle。调整窗口宽度的大小（或拖动列以调整内容象限宽度），以使两个元素对于容器宽度变得太宽。正确的内容将自动消失。

它做什么？

你有一个带有两个额外容器的页脚容器，左右浮动。所有这三个都必须定义相同的高度：

1. 页脚定义overflow: hidden，因此不会显示超出较低可见视口的任何内容。
2. 其他两个然后只是左右浮动

浮动然后照顾一切。如果没有足够的空间容纳浮动元素，它们就会在有足够空间的地方开始渲染。但是在下面显示会隐藏它们，因为容器元素的高度有限。

<div class="footer container">
  <div class="left container">left content</div>
  <div class="right container">right content</div>
</div>

简单的CSS（仅包括相关设置）：

.container {
    height: 2em; /* all containers have the same height */
}

.footer {
    overflow: hidden;
}

.left {
    float:left;
}

.right {
    float: right;
}
​