CSS新手：水平对齐的div不断破坏我的布局

我正在创建我的第一个站点，我对我创建的一些按钮有一个问题。它们是另一个div中的三个div，并且水平对齐。以下是html：

<div class="buttons">
<div id="next-event"></div>
<div id="blog"></div>
<div id="about"></div>
</div>

我在调整窗口大小时遇到问题，正如您在网站上看到的：

对于滚动，我如何设置它，使黄色按钮的包含div仅在窗口低于某个宽度时才会变长

对于滚动，我如何设置它，使黄色按钮分布只扩散到某一点

---

非常感谢

将按钮div的

高度设置为
auto

如果要根据屏幕宽度调整按钮大小，请为每个按钮指定33.33%的宽度。
因此，要定位按钮，可以使用网格：

或者，当屏幕达到一定大小时，您可以使用更改样式，这样它们就不会相互重叠

Edit：这里有一个链接，指向fiddle with the media查询，它可以按照我想象的那样正常工作。我已经删除了浮动和边距，将.buttons div设置为按钮的宽度，将.buttons height设置为auto，并使用margin:0 auto将它们居中

}为什么不能像下面这样使用css媒体查询

@media (max-width: 740px)
    {
        .buttons div
        {
            height: 100px !important;
            width: 100px !important;
            background-size: 200% !important;
            padding: 0 !important;
        }
    }

只需将此代码复制到css文件中。。当您的网页缩小（调整大小）到740px以下时，您的图像将根据以下代码自动调整大小。。这样你就可以根据你想要的屏幕分辨率定制你自己的代码

注意：只需在网页中使用此代码即可。。它可能有用。。您只需要自定义悬停状态。
谢谢Anubhav，但我不希望按钮调整大小，我希望每个按钮之间的空间变宽变薄，但只能达到一定程度。因此，当屏幕变窄时，它们会叠在一起，当屏幕变宽时，它们会并排排列，但随着窗口变宽，它们不会继续在屏幕上扩散。你知道有没有办法做到这一点吗？试着制作一把小提琴，因为这样很难解释。谢恩，你保存了那个链接吗？我单击时，您的更改没有显示。媒体查询似乎是最好的途径，我真的不知道怎么做。@aoifac对不起，链接错了。试试新的：）媒体查询在CSS的末尾。如果你把它添加到你的CSS中，它会工作的。媒体查询功能非常强大，如果您希望您的站点能够响应，您需要掌握它们。幸运的是，它非常简单。@aoifac这里有一些资源可以帮助您：| |您也可以注册到Lynda.com进行免费试用，并查看以下内容：| | |哇，非常感谢您的帮助，太棒了！我一定会查看这些链接。
@media screen and (max-width: 770px) {
#about {
    display: block;
}
.buttons {
    height: auto;
    width: 185px;
    margin: 0 auto;
}
#blog {
    margin-right: 0px;
    float: none;
}
#next-event {
    margin-left: 0px;
    float: none;
}

@media (max-width: 740px)
    {
        .buttons div
        {
            height: 100px !important;
            width: 100px !important;
            background-size: 200% !important;
            padding: 0 !important;
        }
    }