Question

我目前有一个学校项目，我们需要建立一个网站，只是为了好玩！无论如何我已经建立了一个最大宽度的网站，它的效果还不错！只有当屏幕很小时，我的按钮才会覆盖我的图像。有人有解决方案吗？

@media screen and (max-width: 600px){ 
.float-left {float: none;}

科恩

Answer 1

您可以通过首先创建一个新div来将内容下拉到div之外的内容，使用类名“容器”（这是一种常见的Web开发实践）来下拉导航下面的内容：

<div class="container">
    <div>
        <img class="banner" src="http://i184.photobucket.com/albums/x286/tkReaper/ReaperBanner.jpg"/>
    </div>

    <div class="clearfix text-border">
        <p><img class="img-text" src="stadenesch.jpg"/>Hoi! Leuk dat je langskomt bij Stad &amp; Esch web oefeningen! Stad &amp; Esch staat voor maatwerk-onderwijs. Zeker bij informatica worden de lessen al in grote mate afgestemd op de persoonlijke voorkeuren van de leerlingen. Er is voor ieder wat wils. Met deze teksten gaan we de website volstoppen om iets te zien van de mogelijkheden van CSS in combinatie met HTML bestanden </p>
    </div>
</div>

然后将新类“容器”添加到CSS中的“@media屏幕和（max-width：600px）”，以及属性“margin-top”（顶部220px似乎给出结果你'之后'：

@media screen and (max-width: 600px){ 
    .float-left {float: none;}
    .container {margin-top: 220px}
}

注意：这是一种快速，更加静态的方式来完成您所追求的目标，如果您向导航栏添加更多项目，则需要增加“margin-top”上的数字

如何使用max-width

1 个答案: