Question

我几乎是一名CSS初学者，我需要帮助才能创建一个我为移动设备做出响应的div。现在它没有调整大小，你无法阅读文本/从移动设备看整个框。我在CSS编辑器中有这个：

.mod {
    position: relative;
    width: 875px;
    height: 350px;
    padding: 5px;
}

.mod-text,
.mod-background {
    position: absolute;
    left: 15%;
    width: 100%;
}

.mod-text {
    color: #FFF;
    font-size: 1em;
    text-align: center;
    bottom: 0;
}

.mod-background {
    background-color: #000000;
    border-radius: 8px;
    filter: alpha(opacity=60);
    opacity: .6;
    top: 0;
    height: 100%;
}

我将其设置为特定像素的原因是因为我希望该框包含文本和订阅表单的代码片段。非常感谢帮助！

Answer 1

好的，所以我认为主题是在主页上向右推动我的内容，但这是适用于我的CSS代码段：

.container {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 75%;
  height: auto;
  }
.content {
  position: relative;
  color: White;
  padding: 10px;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

使div响应（带文字的透明黑盒子）

1 个答案: