html - CSS3：如何始终只显示标题甚至重新调整窗口大小

Question

是否有任何选项可以响应显示 div 的固定部分（仅限标题）。例如， <strong>内容应该以所有窗口大小显示。

演示http://jsfiddle.net/sweetmaanu/DXBRM/

Answer 1

我在这里编辑你的 jsfiddle：http: //jsfiddle.net/DXBRM/3/

你可以用 javascript 来做，为了简单起见，我使用了 jQuery：

var Cheight = $(".colums").height();
$(".headline").css("bottom", - Cheight + 30);
$(".colums").mouseenter(function() {
    $(this).find(".headline").css("bottom", 0);
});
$(".colums").mouseleave(function() {
    $(this).find(".headline").css("bottom", - Cheight + 30);
});

我假设你的标题是 30px 高度。
如果您希望它在调整窗口大小时也能正常工作，只需使用$(window).resize(function(){...})

Answer 2

您可以通过使用媒体查询来做到这一点：

/*iPads -----------*/
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    {
        strong{
            display: none;
            }
    }

小提琴