html - top/bottom 对相对定位的元素没有影响

标签 html css

问题是这个:即使 html 类“didascalia”是相对定位的，它的父类“col-lg-3 col-md-3 col-sm-3 col-xs-12 spaziatura”也是如此”，我无法在“didascalia”类(class)上下移动，我不知道为什么。例如，我想将它更多地移动到顶部，以便或多或少与其父亲的顶部边框对齐，但元素不会移动。任何想法？非常感谢!

html,body {
  height: 100%; margin: 0px; padding: 0px; }

#navbar {
  margin-bottom:0; }

.alert {
  border-radius: 0; }

.container {
  width:100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  height:100%;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0; }

.row {
  margin-right: 0;
  margin-left: 0; }

.footer {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none; }

.panel {
  border:none; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*ALLARTICLES*/

.articlecontainer{
    clear: both;
    margin-right: 15%;
    margin-left: 15%;
    
    
} @media screen and (max-width: 840px) {
    .articlecontainer {
      margin: 0;
    }}
 
/*ARTICLESFIRSTLINE*/

.articlesfirtsline{
      height: 20%;} 
@media screen and (max-width: 840px) {
    .articlesfirtsline {
      height: 10%;
    }}

.images {
    display: block;
    width:90%; 
    position: relative; 
    left:5%;   
    max-height: 116.547px;
    height: 110px;

} @media screen and (max-width: 840px) {
    .images {
      width: 72px;
      height: 72px;
      float: left;
      left: 3%;
    }}

h3.articlestitle{ 
    color:rgb(255, 68, 34);
    font-size: 28px;
    font-weight: bold;
    position: relative; 
    left:1.1%;  
    
}

.didascalia{ 
   position: relative;
   left:5%;
   width: 90%;
   font-size: 20px;
   font-weight: bold;
}  @media screen and (max-width: 840px) {
    .didascalia {
      position: relative;
      font-size: 17px;
      width: 70%;
      float: left;
      margin-right: 1%;

      

    }}

    

@media screen and (max-width: 840px) {
    .spaziatura {
       padding-bottom: 5%;
    }}


.autore li {
  
  display: inline;
  color: #AAA;
  float: left;
  position: relative;
  left: 5%;

} 

.autore {
  
  font-size: 16px;
  padding-left: 3%;
  padding-bottom: 2%;

} 

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
  <body>
    <div class="container">
    <div class="articlecontainer clearfix">  
      <br><br>
      <h3 class="articlestitle">Latest News</h3>
      <br>
      <div class="articlesfirtsline clearfix">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 spaziatura">
          <img src="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2017/08/Terminator-3-540x270.jpg" class="images">
          <br>
          <h4 class="didascalia">Take pictures like a pro with this Hollywood Art Institute training for under $20</h4>  
          <br>
          <ul class="autore">
            <li>Rachel Kaser - </li>
            <li> 13 hours ago </li> 
          </ul>
        </div>
      </div>    
    </div>
  </body>

最佳答案

使用基于百分比的高度或相对定位时的问题是所有父级也必须为其设置高度。

这会起作用:https://jsfiddle.net/2esovvpc/ 

html,body {
  height: 100%; margin: 0px; padding: 0px; }

#navbar {
  margin-bottom:0; }

.alert {
  border-radius: 0; }

.container {
  height: 100%;
  width:100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  height:100%;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0; }

.row {
  margin-right: 0;
  margin-left: 0; }

.footer {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none; }

.panel {
  border:none; }



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}








/*ALLARTICLES*/

.articlecontainer{
    clear: both;
    margin-right: 15%;
    margin-left: 15%;
    height: 100%;


} @media screen and (max-width: 840px) {
    .articlecontainer {
      margin: 0;
    }}

/*ARTICLESFIRSTLINE*/

.articlesfirtsline{
      height: 20%;} 
@media screen and (max-width: 840px) {
    .articlesfirtsline {
      height: 10%;
    }}

.images {
    display: block;
    width:90%; 
    position: relative; 
    left:5%;   
    max-height: 116.547px;
    height: 110px;

} @media screen and (max-width: 840px) {
    .images {
      width: 72px;
      height: 72px;
      float: left;
      left: 3%;
    }}

h3.articlestitle{ 
    color:rgb(255, 68, 34);
    font-size: 28px;
    font-weight: bold;
    position: relative; 
    left:1.1%;  

}

.didascalia{ 
   position: relative;
   top: 20%;
   left:5%;
   width: 90%;
   font-size: 20px;
   font-weight: bold;
}  @media screen and (max-width: 840px) {
    .didascalia {
      position: relative;
      font-size: 17px;
      width: 70%;
      float: left;
      margin-right: 1%;



    }}



@media screen and (max-width: 840px) {
    .spaziatura {
       padding-bottom: 5%;
    }}


.autore li {

  display: inline;
  color: #AAA;
  float: left;
  position: relative;
  left: 5%;

} 

.autore {

  font-size: 16px;
  padding-left: 3%;
  padding-bottom: 2%;

} 







.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

关于html - top/bottom 对相对定位的元素没有影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46264080/

上一篇：javascript - 如何管理、加速和预加载页面上的所有图像？

下一篇：javascript - 为什么要为 img 标签获取预加载框？

相关文章：

html - IE 7 问题 : Super simple page - TD height not taking effect

android - iOS 和 Android 的 HTML 5 文件输入 [Cordova/Phonegap]

javascript - 使div元素并排显示

javascript - JQuery 插件优化

html - 站点上 Div 之间的间距

c# - 根据另一个属性在 View 中显示模型属性的最佳实践

javascript - 类型错误 : Cannot read property 'id' of undefined

HTML图片元素在手机上下载错误图片

CSS Opacity 不显示在 Chrome 中，而是显示在 JSFiddle 中

javascript - 在页面刷新/重新访问时关闭覆盖

©2024 IT工具网  联系我们