Question

我有一个页面布局，我想做出回应。该页面目前在垂直中间50/50分割。我通过将Section div显示为表格并将div内部显示为单元格来实现此目的。我还在页面的顶部中心有一个绝对定位的标题。

我想做的是，当在较小的屏幕（例如平板电脑或手机）上观看页面时，50/50分割变为水平，所有包含的文本水平和垂直居中，并且标题剩余在页面的顶部中心。

这是我的代码：

html,
body,
section,
div {
  height: 100%;
}
body {
  color: #000000;
  font-family: Cinzel, serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-align: center;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
div {
  width: 50%;
  padding: 1rem;
}
h1 {
  font-size: 1.75rem;
}
.logo {
  text-align: center;
  color: red;
  position: absolute;
  width: 100%;
}
.container {
  display: table;
  height: 100%;
  width: 100%;
}
.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.left-half {
  background: #FFFFFF;
  color: #000000;
}
.right-half {
  background: #000000;
  color: #FFFFFF;
}

<body>
  <section class="container">
    <header class="logo">
      <h1>Title</h1>
    </header>

    <div class="left-half cell">
      <h1>First Half</h1>
    </div>
    <div class="right-half cell">
      <h1>Second Half</h1>
    </div>
  </section>
</body>

非常感谢任何帮助。

Answer 1

将媒体查询用于较小的屏幕，您可以在display: table和display: table-cell中将display: block和.container更改为.cell。

绝对抹掉那个影响所有div的div { width: 50%; }规则，你当然不会想要！（将50％的宽度写入.cell规则，然后为较小的尺寸添加媒体查询规则，使其达到100％。

使垂直拆分页面响应

1 个答案: