0
문제는 이것입니다 : html 클래스 "didascalia"가 상대 위치에 있고, 아버지 클래스 "col-lg-3 col-md-3 col -sm-3 col-xs-12 spaziatura ","didascalia "클래스의 맨 위와 맨 아래로 이동할 수 없으며 그 이유를 모르겠습니다. 예를 들어 아버지의 가장 큰 경계선과 어느 정도 일치 시키려면 맨 위로 이동하는 것이 좋지만 요소는 움직이지 않습니다. 어떤 생각? 대단히 감사합니다!위쪽/아래쪽은 상대적으로 위치한 요소에 아무런 영향을주지 않습니다.
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>