Question

我创建了一个包含两个div的页面。页面的想法是左边的div不应该有滚动条，所以它的位置设置为固定。只有右边的div应该有滚动条。它确实适用于桌面大小，但在响应式设计中，我希望两个div的宽度都是100％。所以他们应该一个接一个地对齐。问题是我不知道应该用什么属性来实现这个垂直对齐（我的代码第二个div正在攀升到第一个顶部）。有什么想法吗？

body {
  margin: 0;
  padding: 0;
}

.firstDiv, .secondDiv {
  width: 50%;
  height:100vh;
}

.firstDiv {
  background-image: url('http://s7d4.scene7.com/is/image/roomandboard/ramsey_939528_15e1_g?$str_g$&size=960,607&scl=1');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
  position: fixed;
}

.secondDiv {
  background-color: white;
  float: right;
}

p {
  line-height: 200%;
  margin: 0;
  padding: 0 20px 0px 20px;
}

@media screen and (max-width: 1020px) {
  .firstDiv {
    width: 100%;
    height:30%;
    float: left;
  }

  .secondDiv {
    width: 100%;
    height: 70%;
    float: left;
  }
}

<!DOCTYPE html>
<html>
<head>
  <title>Idea</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="firstDiv">

  </div>

  <div class="secondDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a nibh in neque condimentum porta. Nunc consequat fermentum iaculis. Maecenas convallis efficitur nulla, eleifend commodo justo pellentesque quis. Fusce eu arcu nec orci lacinia convallis a vel ex. In vehicula efficitur magna eget lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque lacinia ante vitae nisl dignissim tempus. Nullam vitae sapien et lorem efficitur ullamcorper quis non massa. Vestibulum eu ornare sapien. Morbi molestie urna eros, sed egestas ipsum tincidunt in. Vivamus nec ullamcorper ante. Donec ut dui a mauris volutpat suscipit vitae pharetra diam. Maecenas euismod augue arcu, quis consectetur ligula elementum ac.</p>
  </div>
</body>

</html>

Answer 1

将margin-top设置为第一个div高度的第二个div ..

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.firstDiv, .secondDiv {
  width: 50%;
  height:100vh;
}

.firstDiv {
  background-image: url('http://s7d4.scene7.com/is/image/roomandboard/ramsey_939528_15e1_g?$str_g$&size=960,607&scl=1');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
  position: fixed;
}

.secondDiv {
  background-color: white;
  float: right;
}

p {
  line-height: 200%;
  margin: 0;
  padding: 0 20px 0px 20px;
}

@media screen and (max-width: 1020px) {
  .firstDiv {
    width: 100%;
    height:30%;
    float: left;
  }

  .secondDiv {
    margin-top: 30%;
    width: 100%;
    height: 70%;
    float: left;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Idea</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="firstDiv">

  </div>

  <div class="secondDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a nibh in neque condimentum porta. Nunc consequat fermentum iaculis. Maecenas convallis efficitur nulla, eleifend commodo justo pellentesque quis. Fusce eu arcu nec orci lacinia convallis a vel ex. In vehicula efficitur magna eget lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque lacinia ante vitae nisl dignissim tempus. Nullam vitae sapien et lorem efficitur ullamcorper quis non massa. Vestibulum eu ornare sapien. Morbi molestie urna eros, sed egestas ipsum tincidunt in. Vivamus nec ullamcorper ante. Donec ut dui a mauris volutpat suscipit vitae pharetra diam. Maecenas euismod augue arcu, quis consectetur ligula elementum ac.</p>
  </div>
</body>

</html>

＆＃13;

Answer 2

删除位置：固定到firstDiv并使其浮动：向左并在媒体查询中将firstDiv高度设为30vh而不是30％

body {
  margin: 0;
  padding: 0;
}

.firstDiv, .secondDiv {
  width: 50%;
  height:100vh;
}

.firstDiv {
  background-image: url('http://s7d4.scene7.com/is/image/roomandboard/ramsey_939528_15e1_g?$str_g$&size=960,607&scl=1');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
  float: left;
}

.secondDiv {
  background-color: white;
  float: right;
}

p {
  line-height: 200%;
  margin: 0;
  padding: 0 20px 0px 20px;
}

@media screen and (max-width: 1020px) {
  .firstDiv {
    width: 100%;
    height:30vh;
  }

  .secondDiv {
    width: 100%;
    height: 70%;
    float: left;
  }
}

<!DOCTYPE html>
<html>
<head>
  <title>Idea</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="firstDiv">

  </div>

  <div class="secondDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a nibh in neque condimentum porta. Nunc consequat fermentum iaculis. Maecenas convallis efficitur nulla, eleifend commodo justo pellentesque quis. Fusce eu arcu nec orci lacinia convallis a vel ex. In vehicula efficitur magna eget lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque lacinia ante vitae nisl dignissim tempus. Nullam vitae sapien et lorem efficitur ullamcorper quis non massa. Vestibulum eu ornare sapien. Morbi molestie urna eros, sed egestas ipsum tincidunt in. Vivamus nec ullamcorper ante. Donec ut dui a mauris volutpat suscipit vitae pharetra diam. Maecenas euismod augue arcu, quis consectetur ligula elementum ac.</p>
  </div>
</body>

</html>

Answer 3

您只需将margin-top:30%;添加到.secondDiv样式（媒体标记内的样式）即可。此外，float样式是不必要的。

body {
  margin: 0;
  padding: 0;
}

.firstDiv, .secondDiv {
  width: 50%;
  height:100vh;
}

.firstDiv {
  background-image: url('http://s7d4.scene7.com/is/image/roomandboard/ramsey_939528_15e1_g?$str_g$&size=960,607&scl=1');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
  position: fixed;
}

.secondDiv {
  background-color: white;
  float: right;
}

p {
  line-height: 200%;
  margin: 0;
  padding: 0 20px 0px 20px;
}

@media screen and (max-width: 1020px) {
  .firstDiv {
    width: 100%;
    height:30%;
  }

  .secondDiv {
    margin-top:30%;
    width: 100%;
    height: 70%;

  }
}

<!DOCTYPE html>
<html>
<head>
  <title>Idea</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="firstDiv">

  </div>

  <div class="secondDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a nibh in neque condimentum porta. Nunc consequat fermentum iaculis. Maecenas convallis efficitur nulla, eleifend commodo justo pellentesque quis. Fusce eu arcu nec orci lacinia convallis a vel ex. In vehicula efficitur magna eget lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque lacinia ante vitae nisl dignissim tempus. Nullam vitae sapien et lorem efficitur ullamcorper quis non massa. Vestibulum eu ornare sapien. Morbi molestie urna eros, sed egestas ipsum tincidunt in. Vivamus nec ullamcorper ante. Donec ut dui a mauris volutpat suscipit vitae pharetra diam. Maecenas euismod augue arcu, quis consectetur ligula elementum ac.</p>
  </div>
</body>

</html>

响应式设计垂直对齐问题

3 个答案: