gpt4 book ai didi

CSS 重叠 div

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

有了这个CSS

.addProblemClass{
width:300px;
height:300px;
/*width:25%;
height:40%;*/
border:solid 1px #000000;
margin: 5px;
background-color:#FFFFFF;
padding:5px;
opacity:0.9;/*For chrome and mozilla*/
filter:alpha(opacity=90);/*For IE*/
}

.boxHeader{
border: solid 1px #000000;
height: 20%;
padding: 5px;
}

.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
height: 100%;
}

.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
float: left;
width: 20%;
height: 100%;
}

和这个 html

<div class="addProblemClass">
<div class="boxHeader">
<div class="addProblemHeaderImageDiv"></div>//DIV A
<div class="addProblemHeaderTextDiv"></div>//DIV B
</div>
</div>

为什么 DIV A 和 DIV B 重叠?

最佳答案

使用

float: left;

addProblemHeaderTextDiv

.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
float: left;
height: 100%;
}

编辑

Why it is shown in two rows?

由于您将宽度指定为 20% 和 80%,它们将填满整个空间。您还设置了边框,因此它不适合 100% 的空间。您可以减小任何 div 的宽度或移除边框。

关于CSS 重叠 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2251451/

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