Question

我正在制作我的第一个网站，我遇到了一些我创建的按钮的问题。它们是另一个div中的三个div，并且水平对齐。这是html：

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

这是CSS：

.buttons {
height: 200px;
}

#next-event, #about, #blog {
width: 155px;
padding-bottom: 30px;
}


#blog {
margin-right: 125px;
float: right;
height: 155px;
background: url(assets/blog.png) no-repeat;
}

#blog:hover {
background-position: -155px 0px;
}

#next-event {
margin-left: 125px;
float: left;
height: 155px;
background: url(assets/next-event.png) no-repeat;
}

#next-event:hover {
background-position: -155px 0px;
}

#about {
display: inline-block;
width: 95px;
height: 155px;
background: url(assets/about.png) no-repeat;
}

#about:hover {
background-position: -155px 0px;
}

当我调整窗口的大小时，我遇到了问题，正如您在网站上看到的那样：http://madeitseries.com/

对于滚动，如何设置它，以便只有当窗口低于某个宽度时，黄色按钮的包含div才会变长？

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

非常感谢！

Answer 1

将按钮div的height设置为auto

如果你想根据屏幕的宽度调整按钮的大小，每个按钮的宽度为33.33％。

Answer 2

因此，要定位按钮，您可以使用网格：http://youtu.be/0IrWRuEyXYA

或者您可以使用media query在屏幕达到一定大小后更改样式，以便它们不会相互重叠

编辑：这是指向媒体查询小提琴的链接，它正常运行，就像我想象的那样。我删除了浮点数和边距，将.buttons div设置为按钮的宽度，将.buttons高度设置为auto，并使用margin：0 auto对中; http://jsfiddle.net/W6B2L/

@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; }

}

Answer 3

为什么你不能使用如下的css媒体查询，

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

只需将此代码复制到您的css文件中......当您的网页缩小（调整大小）低于740px时，您的图像会根据以下代码自动调整大小。就像您可以自定义自己的代码以获得所需的屏幕分辨率。

注意：只需在您的网页中使用此代码..它可能有用..您只需要为悬停状态进行自定义..

CSS新手：水平对齐的div继续打破我的布局

3 个答案: