边距/填充在 div 之外答案

【问题标题】：Margin/padding comes outside a div边距/填充在 div 之外
【发布时间】：2018-11-05 18:04:12
【问题描述】：

我尝试使用边距/填充（顶部 80% / 底部 20%）将文本放置在 div 底部上方约 20% 的位置。然而，它看起来不像这种方式工作，边距/填充只是开箱即用，而不是根据需要定位文本。

我可以使用 margin: 20% 将它定位在图像的中心，但我想将它定位在底线上方 20% 的位置，否则当我更改分辨率时文本会继续移动，有时它会由于溢出而完全隐藏.

关于如何在 div 底部稍上方对齐的任何建议？最好不使用 position: absolute 因为这个设置对我来说搞砸了其他一切。

.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 class="featured_box">
        <div class="banner" onclick="location.href=">
            <div class="featured_image" style="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)">
                <p class="featured_title">Text goes here</p>
            </div>
        </div>
    </div>
    <div class=browser>

【问题讨论】：

我想每个人都无法理解你到底想要什么。您说“将文本定位在 div 底部上方约 20%”，现在您总共有 5 个 div。你需要指定哪个div？是“浏览器”、“精选框”吗？比基于此查看“将文本定位在底部上方约 20% 的位置”
抱歉，“featured_image”div 底线的 20%。当我说 20% 时，我猜我们说的是图像/div 总高度的 20%。
感谢 Ilimkan Omurzakova，问题已得到解决。只是对似乎是问题的快速更新。使用 margin-top: 20% 而不是像素似乎会导致问题和文本根据分辨率上下浮动。

标签： html css

【解决方案1】：

这是给你的代码：

<body>

      <div class="container-fluid img-responsive">
        <div class="row">
          <div class="col-4 col-sm-4 " ></div>
          <div class=" col-4 col-sm-4" ><img src="4.jpg"> </div>
       </div>
       <div class="row">
        <div class=" col-4 col-sm-4 " ></div>
        <div class=" col-4 col-sm-4" >text goes here</div>
       </div>
      </div>

</body>

您可以调整窗口大小以查看响应：https://jsfiddle.net/3myfa6fe/

请注意，我正在使用引导程序。请从 CDN 引导程序页面为其添加所需的库。这是一个可以理解的非常小的代码，而不是占用那些大的 html css 代码片段。祝一切顺利。

【讨论】：

OP 并不表示他们正在使用 Bootstrap；如果您打算使用 Bootstrap 提供一个，那很好，但请明确说明。使用时会增加巨大的开销。
Bootstrap 提供了开销。它可能是新的或现代的，但不是每个人都使用它，想要使用它，甚至可以使用它。
你在说什么最新的技术是为了让事情变得更容易！！！！！！
不是每个人都使用相同的技术。就像我说的，如果你想包含一个 Bootstrap 解决方案，那很好并且有效，但是你应该明确告诉 OP“我正在使用 Bootstrap”，因为 OP 不能只是将这些类从你的代码添加到他们的代码中，并期望它在什么时候工作他们还没有使用 Bootstrap。
@TylerH 我已经编辑了它现在你很高兴给我一个upvote!!!!!!!!!!!!

【解决方案2】：

这是你想要的吗？

我将以下 CSS 添加到 .featured-image：

display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 20%;

* {
  box-sizing: border-box;
}

.featured_title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  font-size: 4vw;
  color: #000;
  text-align: center;
  color:white;
  
}

.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%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20%;
}

<div class=browser>
  <div class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="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)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

【讨论】：

这非常接近，但是我一直在寻找位于底部的 div 内的文本，但是没有使用顶部填充，因为这样会因为溢出而搞砸：隐藏。要明白我的意思，改变 padding-bottom: 20%;到 padding-top: 35% 。我希望我足够清楚

【解决方案3】：

在这种情况下指定 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, 0, 0.5);
}

.featured_title{
  margin-top: 360px;
  position: relative;
  z-index: 1;
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

<div class="featured_box">
  
  <div class="featured_image">
      <p class="featured_title"> Text goes here </p>
  </div>
</div>

<div class="browser"></div>

【讨论】：

非常接近，谢谢。但是，我正在寻找一个“featured_title”来将自己提升到“featured_image”底部的 20%。否则，当分辨率更改时，文本会消失并且变得太低。我有点希望它只停留在一个位置，并在计算机分辨率改变时改变大小。我知道这可以通过使用@media 标签来完成，但是文本仍然会四处移动并且不能提供所需的结果
不客气！好的我明白了。当你打开我的密码笔 codepen.io/Ilima/pen/gzVWJB?editors=1100 时，文字会移动吗？
它居然不动！我想这就是我一直在寻找的，非常感谢。
@Oful 太棒了！我希望这会有所帮助。顺便说一句，您甚至可以将图像和文本放在一个 div 中，这样代码会更干净、更高效。您添加了 4-5 个 div，这仍然有效，请不要误会我的意思，但是如果每个 div 都有自己不同的值，则在某些情况下最后可能会有一些错误。

【解决方案4】：

我在您的代码中添加了“top”和“position”元素并删除了边距这是你想要的？我的意思是图片的 div 上方的文本

 

   * ..featured_title {
-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;   <!---added position -->
    top: 450px;           <!-- added top --> 
    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 class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="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)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

【讨论】：