1

我正在尝试使用指向其他页面的链接进行动态网格布局，包括图片和文本。问题是我似乎没有找到在网格布局之后引入空白（填充/边距）的任何方法。换句话说，页面正好在主 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;
    }
4

2 回答 2

1

我不确定为什么在 body 元素上有一个 display: table，你说：

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

因此，我可以通过从 body 元素中删除 display: table 和 position: absolute 从 body 类中删除这两个问题来解决这两个问题，然后将 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/

于 2013-05-04T23:34:09.990 回答
0

这是一个有效的修复程序，以防出于某种原因，您希望保留正文表显示。 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>after <div class="body"></div>，并给 clearfix 这个 CSS：

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

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

于 2013-05-04T23:47:43.400 回答