我只是想知道是否有一种技术来设计一个网站,使我的内容区域动态调整它的宽度?动态CSS布局
这种情况是我有2个侧边栏和1个中央内容区域。如果其中一个侧边栏丢失了,我希望内容区域能够占用补充侧边栏留下的额外空间。 如果缺少两个侧边栏,我希望内容区域完全展开。
我知道%s可能是一个潜在的解决方案,但我不知道如何设置上面描述的动态扩展/收缩功能。
我只是想知道是否有一种技术来设计一个网站,使我的内容区域动态调整它的宽度?动态CSS布局
这种情况是我有2个侧边栏和1个中央内容区域。如果其中一个侧边栏丢失了,我希望内容区域能够占用补充侧边栏留下的额外空间。 如果缺少两个侧边栏,我希望内容区域完全展开。
我知道%s可能是一个潜在的解决方案,但我不知道如何设置上面描述的动态扩展/收缩功能。
我认为960 grid system是你的答案。看看它。
也许您在寻找类似于Adaptive CSS-Layouts的产品。
只有唯一的CSS-解决方案,我能想到的,做以下假设:
的方法中,下面所示,采用纯的CSS的工作原理,但是它也使用jQuery来实现右列的去除(从DOM)和娱乐(在DOM):jQuery的不影响/影响任何内容的样式或尺寸(尽管它也会切换链接中用于删除/重新创建列的文本)。
这就是说,示范HTML标记低于:
<div id="contentWrap">
<div id="sidebar">
<!-- navigation -->
</div>
<div id="rightColumnAndMainContent">
<div id="rightColumn">
<h2>References</h2>
<!-- a list of links -->
</div>
<div id="mainContent">
<p><!-- Lorem ipsum text in the demo... --></p>
</div>
</div>
<div id="footer">
<p><a href="#" class="remove">Remove the footer</a></p>
</div>
而CSS:
#contentWrap {
width: 900px;
}
#sidebar {
float: left;
width: 110px;
}
#rightColumnAndMainContent {
position: relative;
margin-left: 120px;
}
#rightColumn {
position: absolute;
top: 0;
right: 0;
bottom: 0;
background-color: #f00;
width: 140px;
}
#mainContent {
background-color: #ffa;
margin-right: 0;
}
#rightColumn + #mainContent {
margin-right: 150px;
}
#footer {
text-align: center;
clear: both;
border-top: 6px solid rgba(0,0,0,0.6);
}
这个工程作为相邻兄弟选择(#rightColumn + #mainContent
比基本id
更具体 - 选择器(#mainContent
),这意味着虽然#mainContent
具有已定义的margin-right: 0;
,但它被推翻如果#mainContent
紧跟在#rightColumn
之后,只有在#rightColumn
出现在加价中时才能做到这一点。
这感觉很糟糕,但它确实有效(至少在JS Fiddle demo的范围内)。
参考文献:
display: table-cell
可以很容易地做到这一点。浏览器支持:http://caniuse.com/css-table
<div class="container">
<div class="leftSidebar">left</div>
<div class="content">content</div>
<div class="rightSidebar">right</div>
</div>
.container {
border: 2px solid #f0f;
width: 400px;
margin: 0 auto;
display: table
}
.container > div {
border: 2px dashed #444;
display: table-cell
}
.leftSidebar, .rightSidebar {
width: 80px
}
你将不得不使用JavaScript/JQuery的为 – Jawad
你能否提供一些代码,以便应用答案可以给? –
你的标记是什么样的?我有一个可能的答案,但它取决于你必须使它工作的HTML。 –