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

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

html css

Html 在2个div之间获得不需要的空间,html,css,Html,Css,我不明白为什么我会得到不想要的空间，我希望俱乐部和活动分区处于相同的高度，但在标题下分区实际上，我在头球和俱乐部及赛事部之间有一个很大的空间 html： <!DOCTYPE html> <html> <head> <title>Metzo</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body&

我不明白为什么我会得到不想要的空间，我希望

俱乐部

和

活动

分区处于相同的高度，但在

标题下

分区

实际上，我在头球和俱乐部及赛事部之间有一个很大的空间

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>

对.metzo类使用高度自动

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

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

metzo

。metzo height表示间隙

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

小提琴：

#space1

到底是干什么的？我的解决方案在元素上使用

框大小调整

，以指定流体宽度以及固定边框宽度：

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

编辑：我意识到

#space1

应该是

.clubs

和

.events

之间的一个空格，但简单地将空元素用作间隔符是不好的做法。没有它，这个解决方案很好

CSS metzo高度的变化：自动

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

这是因为

#space1

元素具有

高度：100%

CSS声明。表示父级高度的

100%

。实际上，这是因为

.clubs

、

#space1

和

。events

的组合宽度超过父级高度的100%，因此由于

inline block

属性而被包装。检查我的答案+如果有人仍然关心IE7（我必须：（）答案上的不合理限制，例如IE7的支持，应该由问题的作者明确提及。），那么你可能应该提到，IE7或以下版本不支持

框大小调整。我只是推荐它，并没有试图以任何方式贬低你的答案：）无论如何，我为你不得不处理那个旧浏览器感到抱歉。你说西红柿，我说。因此，如果这条路已经走了，那么，边框框不会有任何显著的区别。
.clubs,
.events {
    box-sizing: border-box;
    width: 46.5%;
    margin: 0
}
.events {
    margin-left: 3%; // instead of #space1
}

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