打开右“框架”后重新设计网站答案

【问题标题】：recentre site design after opening right 'frame'打开右“框架”后重新设计网站
【发布时间】：2012-02-18 00:16:51
【问题描述】：

我有一个 PHP 站点，设计宽度约为 800 像素，位于页面中心。

我想给它添加一个聊天，这样当它打开时，它会固定在页面的右侧（大约 25% 宽）并将页面的其余部分推到左侧，这样我的设计就重新-centers，但现在这个聊天“框架”在右侧打开。

我不知道我是否能很好地解释自己，但我已经进行了聊天并设置了所有内容，并且我知道如何将 div 标签固定在右侧，这只是获取其余部分的一部分如果打开聊天“框架”，则要重新定位的页面。

有没有办法在不从基地重新开始的情况下做到这一点？

例如。聊天结束

--------------------------
|    ________________    |
|    |              |    |
|    |              |    |
|    |     site     |    |
|    |              |    |
|    |              |    |
|    ----------------    |
|                        |
-------------------------

例如。聊天打开

---------------------------
| ________________  |     |
| |              |  |  c  |
| |              |  |  h  |
| |     site     |  |  a  |
| |              |  |  t  |
| |              |  |     |
| ----------------  |     |
|                   |     |
---------------------------

【问题讨论】：

使用margin-left:auto;margin-right:auto将所有内容放入一个div？

标签： html css frame

【解决方案1】：

没有已知宽度的独立元素的纯 CSS 中心对齐是一个典型的棘手的事情，所以我相信 JavaScript 是这里的解决方案。以下解决方案将“站点”和“聊天”包装到一个居中的 div 中，增加包装器的宽度以说明聊天窗口的存在：

         #wrapper
---------------------------
| ________________  |     |
| |              |  |  #  |
| |              |  |  c  |
| |    #site     |  |  h  |
| |              |  |  a  |
| |              |  |  t  |
| ----------------  |     |
|                   |     |
---------------------------

具有以下初始样式：

#wrapper {
    margin: 0 auto;
    width: 800px; // <-- this needs to increase when chat is visible! 
}
#site {
    float: left;
    width: 800px;
}
#chat {
    display: none; // change to 'display: block;' to to reveal
    float: right;
    width: 200px;
}

由于切换聊天元素需要JavaScript，我们可以同时动态修改#wrapper的宽度。这是一个使用 jQuery 的实现，出于代码简洁、x-browser 兼容性和在线社区的原因，推荐使用它：

$('#chatbtn').click(function(){
    var xcurr = $('#wrapper').width();
    var xtend = $('#chat').width();
    if ($('#chat').is(":visible")) xtend = -xtend;
    $('#wrapper').width(xcurr + xtend);
    $('#chat').toggle();
});

应该这样做！

请查看DEMO。

【讨论】：

【解决方案2】：

为网站提供以下属性：

margin: 0 auto;
padding: 0;

像你说的那样把聊天放在右边，但是给它这个属性：

display: none;

然后，当您打开聊天或任何激活它时，请确保聊天有：

display: block;

如果这不起作用，请尝试添加具有以下属性的容器：

width: 100%;
height: 100%;

希望这会有所帮助。（在我写这篇文章时编辑，有人发布了一个更好的答案！）

【讨论】：