gpt4 book ai didi

HTML、CSS 3 列布局显示 :inline-block gap

转载 作者:行者123 更新时间:2023-11-28 02:57:00 25 4
gpt4 key购买 nike

我想知道是否有人可以帮助我进行 3 列布局。当我使用这段代码时,包装 div 和页脚之间总是有间隙。

HTML

<div id="header">Header</div> 
<div id="wrap">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
<div id="clear"></div>
<div id="footer"></div>¨

CSS

*{
box-sizing: border-box;
margin:0px;
padding:0px;

}

#header {
background-color:aqua;
height:75px;
}

#wrap div{
display:inline-block;
}

#left{
float:left;
width:25%;
height:15px;
background-color:red;
}
#content{
width:50%;
height:15px;
background-color:blue;
}
.clear{
clear:both;
}

#right{
float:right;
width:25%;
height:15px;
background-color:green;
}
#footer{
height:50px;
background-color:yellow;
}

这是我一直在研究的 fiddle - https://jsfiddle.net/axee/czxwyzqL/3/

我非常感谢所有提示!

最佳答案

我已经重写了您的代码,我使用了类而不是 id,并删除了一些不必要的部分。

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
}
.header {
background-color: aqua;
height: 75px;
}
.left {
float: left;
width: 25%;
height: 15px;
background-color: red;
}
.content {
float: left;
width: 50%;
height: 15px;
background-color: blue;
}
.right {
float: left;
width: 25%;
height: 15px;
background-color: green;
}
.footer {
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>

希望对您有所帮助!

关于HTML、CSS 3 列布局显示 :inline-block gap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46394536/

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