Question

我想知道是否有人可以帮助我进行3列布局。当我使用这段代码时，包裹div和页脚之间总是存在差距。

HTML

 X1       X2              X3              X4
228.0   4474.91836735   3507.15151515   6625.0
77.0    468.0           582.0           549.0
160.0   9.0             3507.15151515   6625.0
36.0    250.0           3507.15151515   6625.0
52.0    3.0             3.0             223.0
78.0    998.0           3507.15151515   6625.0

CSS

<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>¨

这是我一直在努力的小提琴 - https://jsfiddle.net/axee/czxwyzqL/3/

我非常感谢所有提示！

Answer 1

我已经重写了你的代码，我使用的是类而不是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列布局显示：内联块间隙

1 个答案: