保持在嵌套 div 中的响应式 div 不起作用答案

【问题标题】：Responsive div to stay in nested div doesnt work保持在嵌套 div 中的响应式 div 不起作用
【发布时间】：2018-03-24 01:12:34
【问题描述】：

当我调整浏览器的大小时，按钮不会与图像保持一致。我在 img div 中尝试了position:absolute，但响应式不能很好地与 position 属性配合使用。显然，float:left 也不能像用 CSS 编写的那样工作。

.section6 {
  margin: 0 auto;
  text-align: center;
  margin-top: 0;
}

.img-group img {
  z-index: 2;
  text-align: center;
  margin: 0 auto;
  border: 1px solid red;
}

div.bg-bar {
  margin-top: -150px;
  max-height: auto;
  height: 150px;
  background-color: #7290ab;
  z-index: 3;
}

.section6 button {
  float: left;
  position: relative;
  z-index: 1;
  margin-top: 200px;
  margin-left: 330px;
  top: 40px;
}

<section class="section6">
  <button>REQUEST AN INTERPRETER</button>
  <div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
  <div class="bg-bar"></div>
</section>

在JSFIDDLE 上查看我所做的事情。

【问题讨论】：

标签： html css responsive-design css-position

【解决方案1】：

您使用的是固定尺寸单位，这不是您制作响应式页面的方式。

如果您希望按钮保持在中间，您必须将其绝对定位在相对 div 内。

类似这样的：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.relative {
  position: relative;
  padding: 10px;
  background: #0fc0fc;
  animation: reduce 2s ease-in-out infinite;
  height: 50px;
}

button.centered {
  position: absolute;
  left: 50%;
  
  /* Kind of makes the anchor point of the element to be in the horizontal center */
  transform: translateX(-50%);

}

@keyframes reduce {
  0%,
  100% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
}

<div class="relative">

  <button class="centered">I'm in the middle</button>

</div>

【讨论】：

哈哈 - 喜欢动画！这对我有用 - 谢谢！

【解决方案2】：

您最好将图像更改为该 div 上的背景图像并将按钮移动到其中。

HTML：

<section class="section6">
    <div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
    <div class="bg-bar"></div>
</section>

CSS：

.section6 { 
  margin: 0 auto; 
  text-align: center; 
  margin-top: 0;  
  }

.img-group { 
  z-index: 2; 
  text-align: right; 
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
  background-size: cover;
  width: 400px;
  height: 370px;
  }

div.bg-bar { 
  margin-top: -150px; 
  max-height: auto;
  height: 150px; 
  background-color: #7290ab; 
  z-index: 3; 
  }

.section6 button { 
  position: relative; 
  z-index: 5;
  top: 100px; 
  margin-right: 20px;
  }

【讨论】：

谢谢，但由于 SEO 跟踪系统，我不想使用背景图片。

【解决方案3】：

试试这个：

HTML：

<section class="section6">
    <div class="img-group">
         <img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
         <button>REQUEST AN INTERPRETER</button>
    </div>
    <div class="bg-bar"></div>
</section>

CSS：

.section6 { 
  margin: 0 auto; 
  text-align: center; 
  margin-top: 0;
}

.img-group {
  position: relative;
}

.img-group img { 
  text-align: center; 
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid red;
}

.img-group button { 
  display: block;
  position: absolute;
  z-index: 10;
  margin-left: -75px;
  top: 50%;
  left: 50%;
  max-width: 100%;
}

div.bg-bar { 
  margin-top: -150px; 
  max-height: auto;
  height: 150px; 
  background-color: #7290ab; 
}

【讨论】：