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

Question

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

<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>

css如下：

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

.wrapper_devider{
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%;
}

.wrapper固定宽度1500px，其余用%完成。我似乎无法解决的问题是我希望滑块是全宽的。我尝试将 .slider 的宽度设置为 1500px，但它只向右扩展。

谁能看出我做错了什么？

男.

Answer 1

包装器的最大宽度为 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>

CSS

.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%;
}

我已经举例说明了它的外观：http://jsfiddle.net/zon1d0gz/

Answer 2

选项

将滑块移出 .wrapepr。
使 .wrapper 宽度为 100% 并添加 60% 的新内部 div。
如果您无法移动滑块，则将其设为 position:absolute 并用填充偏移 .wrapper。

.wrapper {
  position:relative;
  margin: 0 auto;
  max-width: 1500px;
  padding-top:150px;
}
.wrapper_devider {
  width: 60%;
  padding: 0 20%;
}
#header {
  float: left;
  width: 100%;
}
.slider {
  position:absolute;
  left:0;
  top:0;
  display: block;
  float: left;
  width: 1500px;
  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%;
}

<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>

Answer 3

你的 .wrapper class 有 max-width:1500px。这是一个上限，我想你想要：width:1500px。

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

另外 wrapper_devider 设置为 60%，因此滑块不会跨越整个 1500px，因为滑块嵌套在 wrapper_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>

这是 jsfiddle

的解决方案

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

Exclude div from 60% width within a wrapper

html

css

percentage

responsiveness