Css 分区布局；向页眉添加div后的侧栏移动器_Css_Html

Css 分区布局；向页眉添加div后的侧栏移动器

css html

Css 分区布局；向页眉添加div后的侧栏移动器,css,html,Css,Html,试图抓住布局我试图得到一个全宽度的标题，标题里面有一个左侧边栏和一个右侧边栏。正文分为5个部分，全宽，左侧和右侧边栏，中心内容有3列，页脚与页眉相同。边栏是固定宽度的，因此中心内容将根据屏幕大小进行压缩或扩展。我尝试了很多方法来实现这一点，但是失败了！我的最佳尝试如下所示，当我添加“注释”代码时，它会按照我的意图添加左侧标题边栏，但会将左侧边栏移动到中间部分，其中左侧边栏现在应该是中间部分我想我很接近，但错过了一些东西。有人能给我指一下正确的方向吗 Html 请看一下这个JSFIDLE：

试图抓住布局我试图得到一个全宽度的标题，标题里面有一个左侧边栏和一个右侧边栏。正文分为5个部分，全宽，左侧和右侧边栏，中心内容有3列，页脚与页眉相同。边栏是固定宽度的，因此中心内容将根据屏幕大小进行压缩或扩展。我尝试了很多方法来实现这一点，但是失败了！我的最佳尝试如下所示，当我添加“注释”代码时，它会按照我的意图添加左侧标题边栏，但会将左侧边栏移动到中间部分，其中左侧边栏现在应该是中间部分

我想我很接近，但错过了一些东西。有人能给我指一下正确的方向吗

Html

请看一下这个JSFIDLE：

我不确定这是否是你期望的结果。我在div头的末尾添加了一个

，以清除浮动的元素。

是的，这很有效，谢谢。我曾尝试在css中添加clear，但在JSFIDLE中又尝试了一次，这是行不通的。我如何在htlm中不包含样式的情况下获得此结果？啊，好吧…我正在将这两个元素都添加到标题元素中，我将其添加到左侧边栏中，效果良好，谢谢。回答第一个问题，您可以使用该属性创建一个css类，并将其添加到div中。啊啊啊啊啊啊啊啊啊啊啊。。！非常感谢。很好的回应。很抱歉，我的名声很坏！

<body> 
<div class="container">
    <div class="header">
        <!--<div class="headerleft">
            <div class="headerleftcon">leftcon</div>
            </div>-->
        <div class="header-content">Header
        </div>
    </div> 
    <div class="body">body
        <div class="left-sidebar">
            <div class="left-content">left sidebar</div>
        </div>
        <div class="right-sidebar">
            <div class="right-content">right sidebar</div>
        </div>
        <div class="content">Content
        <div class="left-col">
            <div class="left-colcontent">left col</div>
        </div>
        <div class="right-col">
            <div class="right-colcontent">right col</div>
        </div>
        </div>
    </div> 
    <div class="footer">
        <div class="footer-content">Footer</div>
    </div>
</div> 
</body>

html, body {
 height: 100%;
 width: 100%;
 padding: 0px;
 margin: 0px;}
.header, .footer{
 height: 80px;
 background-color: #EFEFEF;
 position: relative;}
.header-content{
 padding: 20px;
 text-align: center;}
/*.headerleft{
 height: 100%;
 background-color: red;
 width: 200px;
 float: left;}
.headerleftcon{
 padding: 0px 0px 0px 0px;}*/
.footer-content{
 padding: 20px;
 text-align: center;}
.container{
 height: 100%;}
.body{
 height: 100%;
 margin-top: -80px;
 margin-bottom: -80px;
 background-color: #C7DFFA;} 
.content{
 padding: 0px 0px 0px 0px;}
.left-sidebar{
 height: 100%;
 background-color: gray;
 width: 200px;
 float: left;} 
.right-sidebar{
 height: 100%;
 background-color: gray;
 width: 200px;
 float: right;}
.right-col{
 height: 500px;
 background-color: blue;
 width: 150px;
 float: right;} 
.left-col{
 height:500px;
 background-color: blue;
 width: 150px;
 float: left;} 
.left-content{
 padding: 100px 10px 100px 10px;
 margin: }
.left-colcontent{
 padding: 100px 10px 100px 10px;} 
.right-content{
 padding: 100px 10px 100px 10px;
 text-align: right;}
.right-colcontent{
 padding: 100px 10px 100px 10px;
 text-align: right;