gpt4 book ai didi

html - 2个内盒1个外盒环绕

转载 作者:太空宇宙 更新时间:2023-11-03 21:57:14 25 4
gpt4 key购买 nike

我正在尝试实现所附 desired.png 上的内容(特别是让另一个框包围 2 个内框)。

enter image description here

我使用以下代码,但 2 个内框周围没有外框。如何实现图像上的内容?

沙盒

            <style type="text/css">
#wrap {
//width:600px;
//margin:0 auto;
border:1px solid red;
//height:100px;
}
#left_col {
float:left;
width:300px;
border:1px solid black;
}
#right_col {
float:right;
width:300px;
border:1px solid orange;
}
</style>
</head>

<body>



<div id="wrap">
<span id="left_col">
...
</span>
<span id="right_col">
...
</span>
</div>

</body>

最佳答案

CSS 没有//Comment 格式。您只能使用/* */。这将是一个错误。您还必须设置包含容器的高度。因为 float 元素不适用于外部容器的高度。并且不要错过内容器的高度。我修改后的 CSS 是:

#wrap {

border:1px solid red;
height: 100px;
width: 600px;
padding: 5px;
}
#left_col {
float:left;
display: inline-block;
width:295px;
height: 100px;
border:1px solid black;
}
#right_col {
float:right;
display: inline-block;
width:295px;
height: 100px;
border:1px solid orange;
}

关于html - 2个内盒1个外盒环绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13029135/

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