Question

我有两个<div>堆叠在一起并居中。如何使它们宽度相等？如果其中一个有width: 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>

和CSS：

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

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

.slider {
position: relative;
max-height: 500px;
margin: 0 auto;
}

所以我需要使.slider div的宽度与.container

相同

Answer 1

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

HTML：

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

CSS：

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

Answer 2

https://jsfiddle.net/jq9qrfrw/1/ 这更接近你想要的，背景图像应该被放置为身体背景而不是那个未闭合的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：

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  padding: 0;
  overflow: hidden;
  width: 96%;
  height: 350px;
  background: #fff;
  margin: 50px auto 0 auto;
  box-shadow: 0 0 20px #777;
}

.slider {
  padding: 0;
  width: 96%;
  position: relative;
  max-height: 500px;
  margin: 0 auto;
  background-color: red;
}

Answer 3

只需在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元素中的box-shadow以检查宽度是否正确。

两个div在彼此之上。让它们宽度相等？

3 个答案: