Question

我正在尝试构建一个简单的1页HTML5 / CSS3网站，并遇到两个与布局相关的问题，我似乎无法解决这个问题。这是我的jsFiddle。

如您所见，下载信息按钮以三种状态之一显示，具体取决于窗口的宽度或宽度：

它显示在联系人电子邮件下方（如果窗口非常窄/移动）;或
如果窗口宽一点，它似乎固定在它所居住的部分的顶部（与电话号码一致）;或
如果窗口是完整的scree / maxed，它似乎固定在它所居住的部分的底部（与第二封电子邮件一致）

我正在寻找此按钮以显示以下行为：

如果窗口很窄（例如在移动浏览器上），那么我希望所有内容保持原样，按钮位于第二封电子邮件下;的但...
一旦窗口变宽，而不是固定在div的顶部，我希望它垂直居中（因此，与第一封电子邮件一致）

此外，最底部有3个<img>标签，目前正在使用placehold.it张图片。我希望将它们水平居中，这样它们就不会再左对齐，并且均匀地分布在它们所居住的行上。

我相信这两个问题实际上是同一个CSS /样式问题的一部分。在我的大量<style>标记中，您会注意到以下规则：

#home .home-inner {
    display: inline;
    float: left;
    text-align: center;
    position: relative;
    width: 100%;
    padding: 10px;
}

我认为使文本中心对齐和相对会以某种方式阻止我将这些其他元素集中在一起，但我无法弄清楚具体如何。有什么想法吗？

Answer 1

您必须在CSS中使用媒体查询，并根据最小宽度和最大宽度定义特定的CSS。

见https://jsfiddle.net/sc5o7h1p/2/

for img：

@media screen and (max-width: 500px) {
  .client-logo {
    width: 90%;
    height: 75% !important;
  }
  .container-img  {
    width: 90% !important;
  }
}

所以我在你的html中添加了新的classe

 <div class="col s4 m2 container-img">

对于你的Btn

@media screen and (min-width: 500px) {
  .resume-download {
    position: relative;
    top: -117px;
    left: 272px !important;
    width:100% !important;
  }
}

CSS3居中规则似乎阻止其他元素正确居中

1 个答案: