0
Das Problem ist dieses: auch wenn die HTML-Klasse "Didascalia" relativ positioniert ist, und das gleiche für seine Vater-Klasse "Col-lg-3 col-md-3 col -sm-3 col-xs-12 spaziatura ", ich kann nicht mit oben und unten die" didascalia "-Klasse bewegen und ich weiß nicht warum. Ich möchte zum Beispiel, es mehr an der Spitze verschieben, um mehr oder weniger mit der oberen Grenze seines Vaters ausgerichtet zu sein, aber das Element bewegt sich nicht. Irgendeine Idee? vielen Dank!oben/unten haben keine Auswirkungen auf relativ positionierte Element
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>