大佬教程收集整理的这篇文章主要介绍了css – HTML布局：将sidebar列添加到现有站点，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<body> <div id="header">...</div> <div id="content">...</div> <div id="footer">...</div> </body>
在这些div中没有使用绝对的/相对的定位技巧,但是在这些div和它们的内在元素的样式中有很多浮点,清除,边距和填充.所有这些都产生一个看起来像这样的网站：
┌───────────────┐ │ header │ └───────────────┘ ┌───────────────┐ │ content │ └───────────────┘ ┌───────────────┐ │ footer │ └───────────────┘
我的问题是：如何添加一个独立的固定宽度左列(侧栏),其中包含与整个站点(页眉内容页脚)合并并将其向右移动的额外内容.
┌────┐┌─────────┐ │side││ header │ │bar │└─────────┘ │ │┌─────────┐ │ ││ content │ │ │└─────────┘ │ │┌─────────┐ │ ││ footer │ └────┘└─────────┘
我知道一个几乎理想的解决方案,但它是丑陋的,需要重新嵌套现有的div：
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
是否有可能这样优雅,只需在身体的某个地方添加一个外部边栏元素,就是这样呢？
<body> <div id="sidebar">...</div> <div id="header">...</div> <div id="content">...</div> <div id="footer">...</div> </body>
我尝试了天真的方法 – 比如造型：
#sidebar { float: left; width: 20em; }
要么
#header { margin-left: 20em; } #content { margin-left: 20em; } #footer { margin-left: 20em; }
这种作品,但它很快就会清除：两个或者清除：在页眉/内容/页脚中遇到左边.
那么桌面解决方案有哪些替代方案？
<div class="container">
<div id="sidebar"></div>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
.container { position:relative; padding:0 0 0 55px; } #sidebar { position:absolute; top:0; bottom:0; left:0; width:50px; BACkground:#000; } #header { border:1px solid #000; width:100px; height:20px; margin:0 0 5px 0; } #content { border:1px solid #000; width:100px; height:50px; margin:5px 0 5px 0; } #footer { border:1px solid #000; width:100px; height:20px; margin:5px 0 0 0; }
以上是大佬教程为你收集整理的css – HTML布局：将sidebar列添加到现有站点全部内容，希望文章能够帮你解决css – HTML布局：将sidebar列添加到现有站点所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。