当绝对元素可见但保持居中时，向页面内容添加边距

Question

我有一个内容居中的页面 width: 980px; margin: 0 auto;。我正在添加一个边栏（shows/hides），它是绝对定位的，我不希望它与内容重叠。我一直在尝试各种方法来解决这个问题，通过向内容添加填充和边距等，但没有达到预期的结果，因为它目前将内容拉到左边，而它仍然应该保持居中。

JSFiddle http://jsfiddle.net/x06c3ysf/

$('#custom-sidebar').on('click', function () {
    $(this).toggleClass('hide');
    if ($(this).hasClass('hide')) {
        $('#inner').removeClass('adjust');
    } else {
        $('#inner').addClass('adjust');
    }
});

// run on page load
if ($('#custom-sidebar').hasClass('hide')) {
    $('#inner').removeClass('adjust');
} else {
    $('#inner').addClass('adjust');
}

想要的结果：内容始终在页面调整大小时居中，当页面太窄以至于被侧边栏挡住时，页面内容应位于侧边栏旁边。

Answer 1

您需要的是：

#inner {
width: 100%;
}

但是，那么内容就是右边的屏幕。

这似乎有效，但可能不适用于所有浏览器：

#inner {
width: 100% -100px;
}

更好地调整 toggleClass() 的 #inner 宽度

Answer 2

只需让边栏浮动即可。删除 class "adjust"

#custom-sidebar {
    background: yellow;
    width: 100px;
    height:300px;
    /*position: absolute;*/
    float: left;
}

#inner.adjust {
    /*margin: 0 0 0 122px;*/
}

喜欢吗？

Answer 3

一种方法是检查内部 div 的左边距是否小于侧边栏的宽度，然后只添加 class 调整

$('#custom-sidebar').on('click', function () {
    var margin_left = $('#inner').css('margin-left');
    var left_width = parseInt(margin_left.replace('px', ''));
    var sb_width = $('#custom-sidebar').width();
    $(this).toggleClass('hide');
    console.log(margin_left);
    console.log(left_width);
    console.log(sb_width);
    if ($(this).hasClass('hide')) {
        $('#inner').removeClass('adjust');
    } else {
        if (left_width <= sb_width) {
            $('#inner').addClass('adjust');
        }
    }
});

Demo Fiddle

Answer 4

你们很亲近。您需要添加媒体查询以防止 'snapping action'

演示版http://jsfiddle.net/x06c3ysf/7/

@media (max-width: 718px) {
    .adjust #inner {
        margin: 0 0 0 122px;
    }
}

当绝对元素可见但保持居中时，向页面内容添加边距

Add margin to page content when absolute element is visible but keep centered

css

jquery