gpt4 book ai didi

css - 在另一个 div 中创建特定的 div

转载 作者:行者123 更新时间:2023-11-28 02:24:07 26 4
gpt4 key购买 nike

我是 css 的新手,想创建以下内容:

enter image description here

因此我创建了以下代码:

#outer{
height: 420px;
width: 550px;
background-color: green
}

#left_space{
float: left;
height: 100px;
width: 100px;
background-color: black;
}

#right_space{
float: right;
height: 50px;
width: 50px;
background-color: yellow;
}
<div id="outer">
<div id="left_space">
<div id="right_space">
</div>
</div>
</div>

然而,这给了我以下输出:

enter image description here

关于我应该更改的内容有任何反馈吗?

最佳答案

我想你正在寻找这个:

<html>
<head>
<title>Test</title>
</head>
<body>
<div id="outer">
<div id="left_space">
</div>
<div id="right_space">

</div>
</div>
</body>
</html>

CSS

#outer{
display: flex;
height: 420px;
width: 550px;
background-color: green
}

#left_space{
flex:1;
height: 100;
width: 100;
background-color: black;
margin: 10px 10px 300px 10px;
}

#right_space{
flex:1;
height: 100;
width: 100;
background-color: yellow;
margin: 10px 10px 300px 10px;
}

您可以访问此链接:http://flexboxfroggy.com/了解更多关于 flexbox :)

关于css - 在另一个 div 中创建特定的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48042852/

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