Question

我正在尝试使用指向其他页面的链接进行动态网格布局，包括图片和文本。问题是我似乎没有找到任何方法在网格布局后引入空格（填充/边距）。换句话说，页面正好在主div结束的位置结束。

这是代码。非常感谢任何帮助，因为我尝试了很多方法，而且其中任何一个都没有。非常感谢。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" /> 
</head>

<body>

    <div class="header"></div>

        <div class="body">

                             <!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
            <a href="" class="categorie">
                    <img src="imgs/asd.png" class="imagine"/>
                <div class="nume">  </div>
            </a>            

        </div>

</body>

</html>

CSS：

html
    {
    background-color:Grey;
    height:auto;
    }
body
    {
    display: table; 
    padding:20px;
    margin: 0 auto;  
    height:100%;
    }
.header
    {
    background-color:white;
    width:700px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    height:75px;
    }
.body, .body>html
    {
    background-color:black;
    width:700px;
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    padding-bottom:20px;
    position:absolute;
    display:block;
    height:auto;
    }
.categorie
    {
    background-color:white;
    margin-left:20px;
    float:left;
    margin-top:20px;
    height:180px;
    width:150px;
    }
.imagine
    {
    width:150px;
    height:150px;
    }
.nume
    {
    background-color:green;
    width:150px;
    height:30px;
    margin-top:-5px;
    }

Answer 1

我不确定为什么有一个显示器：body元素上的表，你说：

“因为我在.body类中使用position：absolute ..否则，.body将不会扩展为封装所有链接。”

所以我能够通过从body元素中删除display：table并从body类中删除position：absolute来解决这两个问题，然后将overflow：auto添加到body类中。

CSS：

body{
  padding:20px;
  margin: 0 auto;  
  height:100%;
}
.body, .body>html {
  background-color:black;
  width:700px;
  margin-top:5px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
  padding-bottom:20px;
  display:block;
  height:auto;
  overflow: auto;
}

JSFiddle： http://jsfiddle.net/Artsen/VhSdg/

Answer 2

这是一个工作修复，如果由于某种原因，你想要保持身体表显示。 http://jsbin.com/agucar/2/edit

首先改变

.body, .body>html
    {
    position:absolute;
    }

到

.body /* removing .body>html didn't change a thing, meaning it was useless */
     {
     float: left;
     }

通过这种方式，您可以使用clearfix div清除浮动（如果正确相对定位），并且如果您将clearfix div保持透明，则您给它的高度将作为“边距”。

在<div id="clearfix"></div>之后添加<div class="body"></div>，并为此CSS提供clearfix：

#clearfix {
  height: 20px;
  width: 100%;
  position: relative;
  clear: both;
}

编辑： Artsen的回答也有效，如果您不需要保留.body {display: table}，他的回答更合适。

HTML结尾处的空格

2 个答案: