gpt4 book ai didi

html - 内部 div 元素位置

转载 作者:行者123 更新时间:2023-11-28 16:36:39 26 4
gpt4 key购买 nike

我需要在父 div 中显示两个 div 元素,看起来像这样

Position of div elements

我尝试了一些类似的东西

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div >

<div style="background-color:red;display:inline-flex;">inner div 1</div>

<div style="background-color:yellow;display:inline-flex;">inner div 2

<div style="background-color:yellow;">innermost div 1</div>
<div style="background-color:yellow;">innermost div 2 </div>

</div>

</div>

</body>
</html>

还有一些组合,但对我没有任何作用,任何人都请对此提出建议。

谢谢。

最佳答案

尝试只添加 div,而不是使用一些 width/float: left 和其他 css 来获得正确的布局。

div {
box-sizing: border-box;
border: 1px solid black;
padding: 2px;
}
.wrapper {
width: 100%;
height: 160px;
padding: 15px;
}
.half {
float: left;
width: 50%;
height: 100%;
}
.inner {
margin: 2px 5px;
height: 30px;
}
.clear {
clear: both;
border: none;
}
<div class="wrapper">
Div
<br/>
<div class="half">
Div 1
</div>
<div class="half">
Div 2
<div class="inner">
div 1
</div>
<div class="inner">
div 2
</div>
</div>
<div class="clear"></div>
</div>

关于html - 内部 div 元素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27422868/

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