gpt4 book ai didi

css - 2 Column Div 在父级之外左右浮动子 div

转载 作者:太空狗 更新时间:2023-10-29 12:38:43 25 4
gpt4 key购买 nike

我找不到解决这个问题的好方法。我在父 div 中有 2 个 div。当我尝试左右浮动 div 以在父 div 内形成 2 列时,子 div 最终位于父 div 下方。

<head> 
<link rel="stylesheet" type="text/css" href="float.css" />
</head>

<body class="wrapper">
<div class= "whole">
<div class="left">
<p> Hello </p>
</div>
<div class="right">
<p> Hello Again</p>
</div>
</div>
</body>

CSS 是

.whole {
padding: 30px 30px 15px 30px;
background-color: yellow;
margin-bottom: 30px;
}
.left {
width:50%;
position:relative;
float: left;
background-color:green;
}
.right {
width:50%;
position:relative;
float: right;
background-color:red;
}

为什么子 div“right, left”中的内容会低于父 div“whole”??

最佳答案

尝试将这些属性添加到父级,例如 whole:

position:relative;
overflow:auto;

这个 css 到子 div:

position:absolute:
top: xxx;
left: xxx;

请注意,您应该使用 id 而不是 class 来表示文档中应该只有一个的元素。

关于css - 2 Column Div 在父级之外左右浮动子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3613096/

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