固定宽度和全宽度的可重复使用的包装页面

我有一个封装对于我的所有网页都是固定宽度，但是如果我有一个内容需要具有完整宽度的网页（例如幻灯片），该怎么办。固定宽度和全宽度的可重复使用的包装页面

HTML

<div id="wrapper"> 
//fixed width contents 
</div>

CSS

#wrapper{ 
width: 960px; 
margin: 0 auto; 
}

我不想再创建一个包装与全宽，如：

CSS

#wrapper-full-width{ 
width: 100% 
}

HTML

<div id='wrapper-full-width'> 
// some contents with full width like slideshow 
</div>

所以我只需要一个包装，我可以用我的所有网页。

首页

<div id="wrapper"> 
<div id="header"></div> 

<div id="slideshow> // fixed width=960px</div> 

<div id="footer"></div> 
</div>

产品页面

<div id="wrapper"> 
<div id="header"></div> 

<div id="slideshow"> // full width=100% </div> 

<div id="footer"></div> 
</div>

我如何可以使用与需要有一个完整宽度的网页内容相同的包装？

来源

2014-02-27 Defyleiti

是否可以在需要全宽幻灯片显示的页面上向'div＃slideshow'或'div＃wrapper'添加一个类？因为你不能在CSS –

嗯，有两个可选：要么一类fullwidth添加到包装本身或特定页面上的<body>标签：

<div id="wrapper" class="fullwidth"> 
    <div id="header"></div> 
    <div id="slideshow"></div> 
    <div id="footer"></div> 
</div>

#wrapper.fullwidth { width: 100%; }

或者：

<body class="fullwidth"> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="slideshow"></div> 
     <div id="footer"></div> 
    </div> 
</body>

.fullwidth #wrapper { width: 100%; }

来源

2014-02-27 11:45:23

中选择基于“页面”的元素（例如url），所以第一个选项看起来不错，所以我想我会使用那个。 – Defyleiti

固定宽度和全宽度的可重复使用的包装页面

回答

相关问题