2 つの div があり、1 つを画面の中央に配置し、もう 1 つをその親 #MyContent (中央に配置されたもの) の左側に配置します。しかし、「Float:left;」を追加するようです。#Latest に DOM エラーが発生すると、#MyContent はもはや #Latest を保持しておらず、#Latest が "position:absolute;" であった場合のように #Latest を残して縮小します。その「相対;」の場合。
私はこれらを持っています:
HTML:
<center>
<div id="MyContent">
<div id="Latest">
<div class="Last"></div>
</div>
</div>
</center>
CSS:
#MyContent {
position: relative;
font-family: FontStencil;
font-size: 12px;
padding: 20px 20px 160px 20px;
color: black;
background: rgba(240, 240, 240, 0.2);
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 250;
width: 950px;
box-shadow: 0px 5px 15px -2px black;
}
#Latest {
position: relative;
font-family: FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align: left;
font-size: 18px;
padding: 20px 20px 30px 20px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
left: 20px;
top: 30px;
width: 570px;
box-shadow: 0px 1px 17px -5px black;
}
.Last {
position: relative;
font-family: SuperG;
text-align: left;
right: -18px;
font-size: 12px;
padding: 15px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 25px;
width: 500px;
height: 415px;
box-shadow: 0px 1px 17px -5px black;
}
すべてが position:Relative です。しかし、float:left; を追加したときに #Latest でない場合のように動作します。ハーフ。