html – 保证金填充超出了div

概述我试图使用margin / padding(前80％/下20％)将文本定位在div底部的20％左右.然而,看起来它不能以这种方式工作,边距/填充只是从盒子里出来而不是根据需要定位文本. 我可以使用保证金将其定位在图像的中心：20％但是我想将它定位在底线以上20％,因为当我改变分辨率时文本继续移动,有时它会因溢出而完全隐藏. 有关如何略微高于div底部的任何建议吗？最好不要使用position：ab 我试图使用margin / padding(前80％/下20％)将文本定位在div底部的20％左右.然而,看起来它不能以这种方式工作,边距/填充只是从盒子里出来而不是根据需要定位文本.

我可以使用保证金将其定位在图像的中心：20％但是我想将它定位在底线以上20％,因为当我改变分辨率时文本继续移动,有时它会因溢出而完全隐藏.

有关如何略微高于div底部的任何建议吗？最好不要使用position：absolute,因为这个设置对我来说搞砸了其他一切.

Fiddle

.featured_Title {    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    margin: auto;    margin-top: 80%; /* this needs to be removed in order for text to become visible as currently it's hIDden due to overflow:hidden */     margin-bottom: 20%;    Font-size: 4vw;    color: #000;    wIDth: 65%;    text-align: center;}.browser {  wIDth: 1366px;  height: 768px;}.featured_Box {    max-height: 500px;    overflow: hIDden;}.banner {    max-height: inherit;}.banner {    margin:auto;    wIDth: 80%;    display: block;    max-height: 500px;    overflow: hIDden;}.featured_image {    overflow: hIDden;    position: relative;    background-size: cover;    background-repeat: no-repeat;    background-position: center;    height: 500px;    wIDth: 100%}

<div class=browser>    <div >        <div  onclick="location.href=">            <div  >                <p >Text goes here</p>            </div>        </div>    </div>    <div class=browser>

解决方法 在这种情况下,指定px而不是百分比将解决问题.

您也可以在codepen上查看 – https://codepen.io/Ilima/pen/gzVWJB?editors=1100

.featured_Box {  max-height: 500px;  overflow: hIDden;  position: relative;  wIDth: 80%;  margin: 0 auto;  overflow: hIDden;}.featured_image {    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg);    overflow: hIDden;    position: relative;    background-size: cover;    background-repeat: no-repeat;    background-position: center;    height: 500px;    wIDth: 100%;}.featured_image:after {  content: '';  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  display: block;  background-color: rgba(0,0.5);}.featured_Title{  margin-top: 360px;  position: relative;  z-index: 1;  Font-size: 2rem;  color: #fff;  text-align: center;}

<div >    <div >      <p > Text goes here </p>  </div></div><div ></div>

总结

以上是内存溢出为你收集整理的html – 保证金/填充超出了div全部内容，希望文章能够帮你解决html – 保证金/填充超出了div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。