Question

我不明白为什么我会得到不受欢迎的空间，我希望clubs和events div在同一高度但在header div下。

实际上，我在头球和球杆之间留下了很大的空间。事件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;
    }

Answer 1

小提琴：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之间的空格，但将空元素简单地用作间隔。没有它，这个解决方案很好！

Answer 2

对.metzo类使用height auto

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

Answer 3

#space1 {
display:inline-block; 
width:3%;
height:10%; /*Change the height*/
float:top;
}

您正在定义相对于父元素的高度，在本例中为metzo

Answer 4

改变CSS metzo身高：自动;

.metzo {
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    padding: 0;
    text-align: center
    width: 80%;
}

Answer 5

.metzo height弥补差距

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

http://jsfiddle.net/LNwYq/

在2个div之间获得不需要的空间

5 个答案: