Question

我正在尝试创建一个三列布局，仅用于实验目的，但是当我尝试将这些列内联时，它们之间会出现间隙，这些间隙将显示在我已链接的Codepen中。

我试图仅使用百分比值来完成此操作而不使用像flex这样的东西，是否有一些我缺少的东西？

Codepen链接：http://codepen.io/benrichi/pen/MJgOze

HTML

<head>
<title>Column Exercise</title>
</head>
<body>
 <div id="col1"> COLUMN 1 CONTENT TO BE PLACED HERE</div>
 <div id="col2"> COLUMN 2 CONTENT TO BE PLACED HERE </div>
 <div id="col3"> COLUMN 3 CONTENT TO BE PLACED HERE</div>
 <div id="footer"> FOOTER CONTENT TO BE PLACED HERE</div>
</body>
</html>

CSS

#col1 {
background-color:aqua;
margin: 0;
padding: 0;
width: 30%;
display: inline-block;
height: 800px;
}

#col2 {
background-color: antiquewhite;
margin: 0;
padding: 0;
width: 30%;
display: inline-block;
height: 800px;
}

#col3 {
background-color: aliceblue;
margin: 0;
padding: 0;
width: 30%;
display: inline-block;
height: 800px;
}

#footer { 
margin: auto;
width: 90%;
background-color: aquamarine;
height: 200px;
}

Answer 1

您可以将inline-block元素视为字，这样间隙就是字之间的正常空间。

摆脱这种情况的一种方法是删除HTML代码中的空格，如：

<div id="col1"> COLUMN 1 CONTENT TO BE PLACED HERE</div><div id="col2"> COLUMN 2 CONTENT TO BE PLACED HERE </div><div id="col3"> COLUMN 3 CONTENT TO BE PLACED HERE</div><div id="footer"> FOOTER CONTENT TO BE PLACED HERE</div>

以下是您查看的codepen http://codepen.io/jpedroribeiro/pen/egOebg

为什么我试图创建这些列之间的间距？

1 个答案: