html - 如何获得此页脚效果

Question

我想知道这个主题如何使右下角的项目随着屏幕变小而消失。

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

我在右下角有项目，但是当屏幕太小时它们会向下移动而不是像这样消失。任何如何获得这种效果的评论或链接都会很棒！谢谢你。

Answer 1

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

我没有检查特定站点的源代码，您正在链接，但我创建了一个简单的 CSS 解决方案，当由于左侧元素而没有更多空间时隐藏右侧元素。

这是一个 JSFiddle。调整窗口宽度（或拖动列以调整内容象限宽度），使这两个元素对于容器宽度而言变得太宽。右边的内容会自动消失。

它能做什么？

您有带有两个附加容器的页脚容器，左右浮动。他们三个必须定义相同的高度，同时：

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

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

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

​And simple CSS (including just relevant settings):

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

.footer {
    overflow: hidden;
}

.left {
    float:left;
}

.right {
    float: right;
}
​