Html 两个div相互重叠。让它们的宽度相等？

我有两个

叠在一起并居中放置。如何使它们的宽度相等？如果其中一个具有

宽度：96%
以下是HTML：

<div class="background-image">
<div class="container">
    <header>
            <ul id="menu">
              <li><a href="index.html">Main</a></li>
              <li><a href="#">Apartments</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Contacts</a></li>
            </ul>  
    </header>
</div>  

<div class="slider">
    .....smth
</div>

因此我需要使.slider div与.container的宽度相同

这是接近你想要的，背景图像应该被放置为身体背景，而不是在未关闭的div。让我知道你需要什么更新，使它更接近你想要的

<div class="container">
  <header>
    <ul id="menu">
      <li><a href="index.html">Main</a></li>
      <li><a href="#">Apartments</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </header>
</div>

<div class="slider">
  .....smth
</div>


这是接近你想要的，背景图像应该被放置为身体背景，而不是在未关闭的div。让我知道你需要什么更新，使它更接近你想要的

<div class="container">
  <header>
    <ul id="menu">
      <li><a href="index.html">Main</a></li>
      <li><a href="#">Apartments</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </header>
</div>

<div class="slider">
  .....smth
</div>

只需在CSS中的两个元素上设置宽度

body{position:absolute; ....}/*needed this because of the body background image*/

.container{
width: 96px;
height: 350px;
background: #fff;
margin-top: 50px;
box-shadow: 0 0 20px #777;
padding: 60px;
}

.slider {
width: 96px;
position: absolute;
max-height: 500px;
margin: 0 auto;
width: 100%;
//box-shadow: 0 0 20px #777;
}

请随意取消注释.slider元素中的框阴影，以检查宽度是否正确。
只需在CSS中的两个元素上设置宽度即可

body{position:absolute; ....}/*needed this because of the body background image*/

.container{
width: 96px;
height: 350px;
background: #fff;
margin-top: 50px;
box-shadow: 0 0 20px #777;
padding: 60px;
}

.slider {
width: 96px;
position: absolute;
max-height: 500px;
margin: 0 auto;
width: 100%;
//box-shadow: 0 0 20px #777;
}

请随意取消注释.slider元素中的框阴影，以检查宽度是否正确。
如果在另一个父div中包含两个div，则可以通过设置该父元素的样式来同时控制这两个div的宽度。然后第一个div周围的填充将延伸父div，第二个div将填充父div的水平空间。此版本适用于：

HTML:

如果两个div都包含在另一个父div中，则可以通过设置该父元素的样式来同时控制两个div的宽度。然后第一个div周围的填充将延伸父div，第二个div将填充父div的水平空间。此版本适用于：

HTML:

正文{位置：绝对；左：0；右：0；背景重复：无重复；显示：块；背景图像：url（../images/14698895643799.jpg）；背景附件：固定；背景位置：中心；背景大小：封面；宽度：100%；高度：100%；}正文{位置：绝对；左：0；右：0；背景重复：无重复；显示：块；背景图像：url（../images/14698795643799.jpg）；背景附件：固定；背景位置：中心；背景大小：封面；宽度：100%；高度：100%；}我已尝试添加您的更新，但它的外观与我希望的不一样。水平滚动条现在出现。我已尝试添加您的更新，但它的外观与我希望的不一样。水平滚动条现在出现。
<div class="background-image">
    <div class="mycolumn">
        <div class="container">
            <header>
                    <ul id="menu">
                      <li><a href="index.html">Main</a></li>
                      <li><a href="#">Apartments</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">Blog</a></li>
                      <li><a href="#">Contacts</a></li>
                    </ul>  
            </header>
        </div>  

        <div class="slider">
            .....smth
        </div>
    </div>
</div>

body{position:absolute; ....}
.mycolumn {
width: 96%;
margin-top: 50px;
}
.container{
height: 350px;
background: #fff;
padding: 60px;
box-shadow: 0 0 20px #777;
}
.slider {
position: relative;
max-height: 500px;
margin: 0 auto;
}