Question

问题在于：即使html类＆＃34; doascalia＆＃34;是相对定位的，对于它的父级＆＃34; col-lg-3 col-md-3 col-sm-3 col-xs-12 spaziatura＆＃34;是相同的，我无法移动顶部和＆＃34; didascalia＆＃34;上课，我不知道为什么。我希望例如在顶部更多地移动它，以便与其父亲的顶部边界或多或少地对齐，但元素不会移动。任何的想法？非常感谢你！

＆＃13;

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;
}

＆＃13;

  <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>

＆＃13;

Answer 1

根据百分比使用高度或相对定位时的问题是，所有父母也必须设置高度。

这样可行：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;
}

Answer 2

删除 img 和 h4

之间的 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">
          <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>

这里是：https://jsfiddle.net/xwcvkcsk/1/

然后你可以在类didascalia中应用'margin-top'来控制它从顶部的位置。

顶部/底部对相对定位元素没有影响

2 个答案: