gpt4 book ai didi

HTML/CSS block 和相对定位

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

您好,我正在尝试使用相对定位和 div block 将 4 个 block 定位在顶部,两个在底部。但是,由于某些原因,第二个 block 没有显示。需要帮助!~

<!DOCTYPE html>
<html>
<head>
<style>
div{text-align:center;}
span{display:block}
#block1{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
#block2{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;

</style>
</head>

<body>



<div id="block1"> <span> left:0;top:0; </span></div>
<div id="block2"><span> right:0;top:0;</span></div>
</body>
</html>

最佳答案

There was a typo check the answer

CSS

    div{text-align:center;}
span{display:block}
#block1{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
}
#block2{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;

}
#block3{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
float:left;
}
#block4{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;

float:left;
}

HTML

<div id="block1"> <span> left:0;top:0; </span></div>
<div id="block2"><span> right:0;top:0;</span></div>
<div id="block3"> <span> left:0;top:0; </span></div>
<div id="block4"><span> right:0;top:0;</span></div>

对/对

Output

关于HTML/CSS block 和相对定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23452725/

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