Html 从包装内的60%宽度中排除div_Html_Css_Percentage_Responsiveness

Html 从包装内的60%宽度中排除div

html css

Html 从包装内的60%宽度中排除div,html,css,percentage,responsiveness,Html,Css,Percentage,Responsiveness,我正在创建一个具有以下设置的网站： <html> <body> <div class="wrapper"> <div class="wrapper_devider"> <div id="header"></div> <div class="slider"></div> <div id

我正在创建一个具有以下设置的网站：

<html>    
<body>
    <div class="wrapper">
        <div class="wrapper_devider">    
            <div id="header"></div>
            <div class="slider"></div> 
            <div id="container"></div> 
            <div class="sidebar"></div>  
            <div id="footer"></div> 
        </div>
    </div>
</body>
</head>

.wrapper

的固定宽度为1500px，其余宽度为%。我似乎无法解决的问题是，我希望滑块是全宽的。我尝试将

.slider

的宽度设置为1500px，但它只会向右扩展

谁能看出我做错了什么

包装的最大宽度为1500，这与固定宽度不同，看起来像

width: 1500px;

即使将宽度设置为1500，它仍然无法工作，因为滑块元素位于分隔器内

我建议采用以下布局：

HTML

<body>
    <div class="wrapper">
        <div class="wrapper_divider">    
            <div id="header">header</div>
        </div>
        <div class="slider">slider</div> 
        <div class="wrapper_divider">
            <div class="container">container</div> 
            <div class="sidebar">sidebar</div>  
            <div class="footer">footer</div> 
        </div>
    </div>
</body>

我已经举例说明了它的外观：

选项

.wrapper{
  margin: 0 auto;
  width: 1500px;
}

.wrapper_divider{
  width:60%;
  padding:0 20%;
}

#header{
  float: left;
  width: 100%;
}

.slider{
  display:block;
  float:left;
  width:100%;
  background-color:#0000FF;
  height:150px;   
}

#container{
  float: left;
  width: 100%;
}

.sidebar{
  float: left;
  width: 100%;
  background: #eeeeee;
  display: inline;
}

#footer{
  display:block;
  float: left;
  width: 100%;
}

将滑块移到

.wraper

之外

使

.wrapper

100%宽度，并添加60%的新内部div

如果无法移动滑块，则将其设置为

位置：绝对

，并使用填充偏移

.wrapper

.wrapper{
位置：相对位置；
保证金：0自动；
最大宽度：1500px；
填充顶部：150px；
}
.德维德先生{
宽度：60%；
填充：0.20%；
}
#标题{
浮动：左；
宽度：100%；
}
.滑块{
位置：绝对位置；
左：0；
排名：0；
显示：块；
浮动：左；
宽度：1500px；
背景色：#0000FF；
高度：150像素；
}
#容器{
浮动：左；
宽度：100%；
}
.侧边栏{
浮动：左；
宽度：100%；
背景：#eeeeee；
显示：内联；
}
#页脚{
显示：块；
浮动：左；
宽度：100%；
}

您的

.wrapper

类具有

最大宽度：1500px

。这是一个上限，我想您需要：

宽度：1500px

.wrapper{
    width: 1500px;
    display: inline-block;
    height: 100%;
}

另外，

wrapper\u devider

设置为60%，因此滑块不会跨越整个1500px，因为滑块嵌套在

wrapper\u devider

中。我会完全删除那个div，你不需要它

<body>
    <div class="wrapper">
        <div id="header"></div>
        <div class="slider"></div> 
        <div id="container"></div> 
        <div class="sidebar"></div>  
        <div id="footer"></div> 
    </div>
</body>

下面是解决方法

尝试添加

clear:both到你的。谢谢。它确实奏效了。然而，我不是一个使用position:absolute的大粉丝是的，这不是我推荐的方式，但我认为你无法控制页面布局，只能访问css。不，我拥有一切，但你为什么认为（为了防止将来发生！）我会这么做，但很快就会做到：-）
<body>
    <div class="wrapper">
        <div id="header"></div>
        <div class="slider"></div> 
        <div id="container"></div> 
        <div class="sidebar"></div>  
        <div id="footer"></div> 
    </div>
</body>