0

望ましくないスペースができてしまう理由がわかりません。 と div を同じ高さで div の下に配置したいclubsのeventsですheader。

実際には、ヘッダーとクラブ & イベント div の間に大きなスペースを確保しています。

html:

<!DOCTYPE html>
<html>
<head>
<title>Metzo</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div class="metzo">

        <div class="header">
        </div>
<!-- Getting a huge space here in the y-axis -->
        <div class="clubs">
        hello
        </div>
        <div id="space1"> </div>
        <div class="events">
        hello
            <?php 
                //include("event.php");
                //include("event.php");
                //include("event.php");
            ?>
        </div>
    </div>
</body>

</html>

CSS:

html {background-color:black;}
html, body { height: 100%; width: 100%; margin-top: 1%; color:white;}

.metzo 
    {
    width:80%;
    height: 80%;
    padding:0px;
    margin-left:10%;
    margin-right:10%;
    /*margin-bottom:5%;*/
    text-align:center;
    }

.header
    {
    width:100%;
    height:10%;
    border:solid thick white;
    }

.clubs
    {
    display:inline-block;
    width:45%;
    height:100%;
    border:solid thick white;
    margin-top:0px;
    }

#space1 {
    display:inline-block; 
    width:3%;
    height:100%;
    float:top;
    /*border:solid thick white;*/
    }

.events
    {
    display:inline-block;
    width:45%;
    height:100%;
    border:solid thick white;
    text-align:center;
    }
4

5 に答える 5

3

フィドル: http://jsfiddle.net/UC7GE/

一体何#space1のためにあるのでしょうか？私のソリューションはbox-sizing要素を使用して、流動幅と固定境界線幅の指定を有効にします。

.clubs,
.events {
    box-sizing: border-box;
    width: 46.5%;
    margin: 0
}
.events {
    margin-left: 3%; // instead of #space1
}

編集:と#space1の間のスペースであることを理解していますが、空の要素を単にスペーサーとして使用するのは悪い習慣です。このソリューションは、それがなくてもうまくいきます!.clubs.events

于 2013-08-10T10:05:43.840 に答える
2

CSS メゾの変更 Height:Auto;

.metzo {
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    padding: 0;
    text-align: center
    width: 80%;
}
于 2013-08-10T10:12:54.947 に答える
2

.metzo クラスに高さ auto を使用する 

.metzo {
        width:80%;
        height: auto;
        padding:0px;
        margin-left:10%;
        margin-right:10%;
        /*margin-bottom:5%;*/
        text-align:center;
        }
于 2013-08-10T09:59:26.293 に答える
2 
#space1 {
display:inline-block; 
width:3%;
height:10%; /*Change the height*/
float:top;
}

この場合は親要素に対して高さを定義していますmetzo

于 2013-08-10T10:04:05.580 に答える
1

.metzo の高さがギャップを生む

.metzo 
    {
    width:80%;
    /*height: 80%;*/
    padding:0px;
    margin-left:10%;
    margin-right:10%;
    /*margin-bottom:5%;*/
    text-align:center;
    }

http://jsfiddle.net/LNwYq/

于 2013-08-10T10:05:06.573 に答える