HTML-水平拆分，文本位于拆分的下方和上方-堆栈溢出

顺晟科技

2022-10-18 14:05:16

223

我想创建一个页面，该页面由水平线上方的一个框和水平线下方的一个框分割。就在线的上面和下面，我想有一个文本。我想出了一个使用Flex和4个DIV的解决方案，其中我将每个DIV的高度调整到大约30%-20%-20%-30%。然而，当进行响应时，这有时会使文本穿过水平线。我想保证上面的文字保持在上面，下面的文字保持在下面。

我的解决方案是-https：//codepen.io/tobwun/pen/vwwrgwy.

<代码>正文，HTML{高度：100%；宽度：100%；}.{显示：Flex；Flex-Direction：列；高度：100%；宽度：100%；文本对齐：居中；颜色：白色；字体粗细：粗体；字体大小：2em；}.D1{背景颜色：粉红色；宽度：100%；高度：30%；}.D2{背景颜色：粉红色；宽度：100%；高度：20%；}.D3{背景色：浅蓝色；宽度：100%；高度：20%；}.D4{背景色：浅蓝色；宽度：100%；高度：30%；}

<代码><；身体>；<；DIV类=“ M ”>；<；DIV类=“ D1 ”>；<；/DIV>；<；DIV类=“ D2 ”>；上面的文字<；/DIV>；<；DIV类=“ D3 ”>；<；/DIV>；<；DIV类=“ D4 ”>；在文本下面<；/DIV>；<；/DIV>；<；/正文>；

我想知道是否可能有两个DIV和一些填充？第一个文本在底部，第二个文本在顶部..如果在设计上不建议使用Flexbox，我也可以使用另一种解决方案。

谢谢你的帮助！

顺晟科技：

为什么不使用两个元素，并使用body, html { height: 100%; width: 100%; } .m { display: flex; flex-direction: column; height: 100%; width: 100%; text-align: center; color: white; font-weight: bold; font-size: 2em; } .d1 { background-color: pink; width: 100%; height: 30%; } .d2 { background-color: pink; width: 100%; height: 20%; } .d3 { background-color: lightblue; width: 100%; height: 20%; } .d4 { background-color: lightblue; width: 100%; height: 30%; }和<body> <div class="m"> <div class="d1"> </div> <div class="d2"> ABOVE TEXT </div> <div class="d3"> </div> <div class="d4"> BELOW TEXT </div> </div> </body>来根据需要放置它们呢？

<代码>正文，HTML{高度：100%；宽度：100%；}.{显示：Flex；Flex-Direction：列；高度：100%；宽度：100%；颜色：白色；字体粗细：粗体；字体大小：2em；文本对齐：居中；}.顶部，.底部{宽度：100%；高度：50%；显示：Flex；Justify-content：中心；}.顶部{背景颜色：粉红色；align-items：flex-end；垫底：0.5em；}.底部{背景色：浅蓝色；align-items：flex-start；填料-顶部：0.5em；}

<代码><；身体>；<；DIV类=“ M ”>；<；DIV类=“ top ”>；上面的文字<；/DIV>；<；DIV类=“底部”>；在文本下面<；/DIV>；<；/DIV>；<；/正文>；

解决这个问题

最简单的方法是使用align-items。justify-content将把元素放在垂直中心线下方。<代码>底部：50%；将元素置于垂直中心线之上。

<代码>正文{保证金：0；最小高度：100VH；}.top-text{位置：绝对；底部：50%；}.底部文本{位置：绝对；最高：50%；}。top-text，.底部文本{左：0；权利：0；}/*仅用于样式*/身体{背景：线性梯度（深蓝色0%50%，深红色50%100%）；颜色：白色}。top-text，.底部文本{文本对齐：居中；字体大小：2em；边框：1px纯白色；填充：5px；}

<代码><；DIV类=“ top-text ”>；top<；/DIV>；<；DIV CLASS=“ bottom-text ”>；bottom<；/DIV>；

上一篇：HTML-我可以对同一个URL使用多下一篇：HTML-在模式窗体外的窗体字段中设

网站建设

Html

HTML-水平拆分，文本位于拆分的下方和上方-堆栈溢出