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: テーブルがあった理由が正確にはわかりません。

「.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/

于 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>の後に追加し<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 に答える