gpt4 book ai didi

html - 使垂直拆分页面响应

转载 作者:行者123 更新时间:2023-11-28 05:18:30 27 4
gpt4 key购买 nike

我有一个页面布局,我想使其响应。该页面目前在垂直方向中间以 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>

如有任何帮助,我们将不胜感激。

最佳答案

在较小的屏幕上使用媒体查询,您可以在 中将 display: tabledisplay: table-cell 更改为 display: block >.container.cell

并且绝对删除那个 div { width: 50%; } 规则 - 这会影响所有 div,您当然不会想要它! (改为将 50% 的宽度写入 .cell 规则,并为其添加一个媒体查询规则以使其成为 100% 的较小尺寸。

关于html - 使垂直拆分页面响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39191408/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com