1
実際のページが読み込まれるまで、自分のページのプレースホルダビューを作成しようとしています。子divを親divのサイズにする方法
私はスニペットをチェックし、その親div
<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>
の大きさを取るために、このdiv要素をしたいです。それは細い緑の線です。 親のdivのサイズにしたいと思います。その前に白い色を付けると、空白のように見え、その前には灰色の光沢のある領域がbuttonのように表示されます。
@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>私はこの
あり、 parentに 'position：relative'を追加し、' top'、 'left'、' bottom'と 'right'プロパティの両方をゼロに設定して子要素に' position：absolute'を追加することができます。 –
はい私はそれを試みた。私は親に 'position：relative'を追加した後に' left'と 'width'プロパティを与え、子に' position：absolute'を付けて、それを私が望む場所に正確に配置しました。それは反応しません。 –
なぜですか？あなたは応答するために％の値を使うことができます。たとえば、要素が20ピクセル大きいとします。最初のものは「左：33.3％」、後者は「左：66.6％」です。次に、それらを中心にするために両方の要素に 'margin-left：-10px'を与えます –