Question

我正在制作响应式网站布局，其中某些网页的内容区域可能有右侧信息面板，而其他页面可能没有。我正在我的工作使用的自定义CMS中构建此站点。现在，我们使用模板创建所有HTML结构，并使用宏来提取客户端通过CMS输入的内容。

通常我会为使用右侧面板的页面创建单独的模板，为那些不使用右侧面板的页面创建单独的模板，但是客户端可能希望将正确的面板添加到没有它们的页面中未来，我想知道是否有一些覆盖样式我可以添加到我的模板中，以便整个网站可以在一个模板上运行，而不必添加一个具有正确面板的模板页面和不适合其他人的模板。

我的代码是这样的：

CSS：

section#maincontent {width:720px; float:left;}
aside {width:240px; float:right;}

HTML：

<section id="maincontent">[conetent]</section>
<aside>[right_panel]</aside>

如果客户端决定在页面/模板中添加/删除右侧面板，那么是否有一段javascript / CSS / web魔法可以覆盖右侧面板div，以便maincontent填充页面的宽度而不必创建一个添加/删除样式的新模板？

Answer 1

您只需将其更改为不显示即可。

HTML ...

<div id="theOneToBeRemoved" onclick="remove()">
</div>

的Javascript

function remove(){
   document.getElementById("theOneToBeRemoved").style.display = "none";
}

我会注意到你可能不想将onclick事件添加到div ...也许添加一个按钮X或关闭..沿着这些线的东西...所以如果他们点击进入div它不会意外关闭...此外，你可能想要为你的div添加一些css过渡...所以当它关闭它的光滑而不是那么突然..看起来好多了

Answer 2

添加一个包装div，输出类＆＃34; withoutRightPanel＆＃34;当你想＆＃34;删除＆＃34;右侧pannel，并在下面添加css规则：

HTML

<div class="withoutRightPanel">
    <section id="maincontent">[conetent]</section>
    <aside class="rightPanel">[right_panel]</aside>
</div>

CSS

.withoutRightPannel .rightPanel
{
   display:none;
}
.withoutRightPannel #maincontent
{
    //Fill the gap after you hide right panel, or you can set a value by pixel
    width:100%;
}

覆盖未使用的div

2 个答案: