在div的内部div中画一条分割线,分割这内部和外部的div
时间: 2024-02-23 20:58:42 浏览: 122
要在一个 div 元素的内部再创建一个 div 元素作为分割线,并将它放置在内部 div 元素的中央位置,可以使用如下的 HTML 和 CSS 代码:
```
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
width: 400px;
height: 300px;
background-color: #f2f2f2;
position: relative; /* 设置为相对定位 */
}
.inner {
width: 80%;
height: 80%;
background-color: #e6e6e6;
margin: 10%;
position: relative; /* 设置为相对定位 */
}
.line {
width: 1px;
height: 100%;
background-color: #ccc;
position: absolute; /* 设置为绝对定位 */
left: 50%; /* 将分割线放置在内部 div 元素的中央位置 */
transform: translateX(-50%); /* 水平居中 */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="line"></div>
<!-- 其他内容 -->
</div>
</div>
</body>
</html>
```
在这个示例中,外部的 div 元素和内部的 div 元素都设置了相对定位,以便让内部的 div 元素能够相对于外部的 div 元素进行定位。内部的 div 元素中间位置的分割线则使用绝对定位,通过 left 和 transform 属性将其水平居中并放置在内部 div 元素中央位置。
阅读全文