1
Ich versuche, eine Platzhalter Ansicht meiner Seite zu machen, bis die aktuelle Seite geladen wird.Wie Kind div macht die Größe der Mutter div nimmt
Ich möchte dieses divElement die Größe seiner Mutterdiv
<div class="col-md-1 col-sm-1 col-xs-1 col-md-push-3 col-sm-push-3 col-xs-push-3 property-masker-sub-four-one"></div>
prüfen Schnipsel zu nehmen. Es ist eine dünne grüne Linie. Ich will es die Größe seines Elternteil seindiv und ich werde ihm eine weiße Farbe geben, so dass es wie ein Leerzeichen aussehen und die graue schimmernde Fläche davor wie ein button aussehen wird.
@keyframes placeHolderShimmer{
0%{
background-position: -368px 0
}
100%{
background-position: 368px 0
}
}
.calendar-wrapper, .property-wrapper, .paid-wrapper, .details-wrapper{
border: 2px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
min-height: 250px;
/*margin-left: 40px;*/
}
.paid-wrapper{
min-height: 160px;
}
.calendar-wrapper{
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
}
.paid-wrapper{
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
}
.property-wrapper{
\t min-height: 150px;
}
.details-wrapper{
min-height: 350px;
}
.property-animated-background, .details-animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 170px;
}
.details-animated-background{
height: 350px;
}
.property-masker-one{
\t padding: 15px 0;
background-color: white;
}
.property-masker-two{
padding: 17px 0;
}
.property-masker-three{
padding: 20px 0;
background-color: white;
}
.property-masker-four{
padding: 17px 0;
}
.property-masker-sub-four-one{
background-color: green;
}
.property-masker-five{
padding: 16px 0;
background-color: white;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
\t <div class="container">
\t \t <div class="row">
\t \t \t <div class="col-md-3 col-sm-3 col-xs-3 calendar-wrapper"></div>
\t \t \t <div class="col-md-9 col-sm-9 col-xs-9 property-wrapper">
\t \t \t \t <div class="property-animated-background">
\t \t \t \t \t <div class="property-masker-one"></div>
\t \t \t \t \t <div class="property-masker-two"></div>
\t \t \t \t \t <div class="property-masker-three"></div>
\t \t \t \t \t <div class="property-masker-four">
\t \t \t \t \t \t <div class="col-md-1 col-sm-1 col-xs-1 col-md-push-3 col-sm-push-3 col-xs-push-3 property-masker-sub-four-one"></div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="property-masker-five"></div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-md-3 col-sm-3 col-xs-3 paid-wrapper"></div>
\t \t \t <div class="col-md-9 col-sm-9 col-xs-9 details-wrapper">
\t \t \t \t <div class="details-animated-background">
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>Ich möchte es wie dieses
ich ziemlich sicher bin, ich nicht wirklich verstehen, was Sie versuchen, mit diesen zu erreichen, aber wenn Sie ein Element wollen genau die gleiche Größe ihrer Eltern zu sein, relative' an die Eltern und 'Position: Sie können' Position hinzufügen absolute' dem Kind Element sowohl mit 'top',' left', 'bottom' und' right' auf Null gesetzt Eigenschaften. –
Ja, ich habe es versucht. Ich habe es 'left' und' width' Eigenschaft nach dem Hinzufügen 'Position: relative' zu Eltern und' Position: absolute' auf das Kind und legte es genau dort, wo ich es will, aber dann werden es nicht auf mobilen Geräten arbeiten. Es reagiert nicht. –
Warum nicht? Sie können% -Werte verwenden, um darauf zu reagieren. Nehmen wir an, Ihre Elemente sind 20 Pixel groß. Der erste hat "links: 33,3%" und der zweite hat "links: 66,6%". Dann geben Sie beiden Elementen einen 'margin-left: -10px', um sie zu zentrieren. –