gpt4 book ai didi

html - 无法在另一个 div 中并排获得 2 个 div

转载 作者:太空宇宙 更新时间:2023-11-04 13:40:47 29 4
gpt4 key购买 nike

我需要你的帮助,

如何让另一个(红色)div 很好地排列在主 div 内蓝色 div 的右侧。我在下面附上了问题的图片:

enter image description here

代码如下:

* {
margin: 0;
padding: 0;
}
html {
background: rgb(132, 132, 132);
}
.centerObject {
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
/* Half of Width */
margin-top: -300px;
/* Half of Height */
background: rgb(212, 208, 200);
border: 2px ridge rgb(75, 75, 75);
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
<div class="centerObject">
<div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>
<div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>
</div>
</body>

</html>

最佳答案

您可以添加此 CSS:

.centerObject div {
box-sizing:border-box;
display:inline-block;
}

* {
margin: 0;
padding: 0;
}
html {
background: rgb(132, 132, 132);
}
.centerObject {
width:800px;
height:600px;
position:absolute;
top:50%;
left:50%;
margin-left:-400px;
/* Half of Width */
margin-top:-300px;
/* Half of Height */
background: rgb(212, 208, 200);
border: 2px ridge rgb(75, 75, 75);
}
.centerObject div {
box-sizing:border-box;
display:inline-block;
}
<div class="centerObject">
<div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>
<div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>
</div>

一个问题是您的子 div 比它们的父 div 宽(计算它们的边框),因此 box-sizing:border-box; 将解决这个问题。然后通过使用 display:inline-block; 可以让它们并排显示(默认情况下它们是 block 元素)。

关于html - 无法在另一个 div 中并排获得 2 个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28838950/

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