0

我不明白为什么我会得到不想要的空间，我希望divclubs和eventsdiv 处于相同的高度但在headerdiv 之下。

实际上，我在标题和俱乐部和活动 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
}

编辑：我意识到这意味着and#space1之间有一个空格，但是将空元素简单地用作间隔符是不好的做法。没有它，这个解决方案也很好！.clubs.events

于 2013-08-10T10:05:43.840 回答
2

对 .metzo 类使用自动高度 

.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 回答
2

CSSmetzo 高度的变化：自动；

.metzo {
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    padding: 0;
    text-align: center
    width: 80%;
}
于 2013-08-10T10:12:54.947 回答
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 回答