當圖像浮動時，下拉帽改變位置正確

Question

我試圖儘可能地複製html中的書的外觀，其中包括左下浮動的下拉帽和正確浮動的多個圖像。一切工作正常，1圖像漂浮右...但是當多於一個圖像右移時，下拉帽改變位置。在我的編輯器中看起來很好，但在我測試過的任何瀏覽器中都沒有。我用盡了一切我能想到的... 的CSS：

body { 
background:#9CF; 
margin:0; 
padding:0; 
} 

h1 { 
font-family:Lusitana, serif; 
font-size:14px; 
letter-spacing:.3em; 
} 

h2 { 
font-family:'Crimson Text', serif; 
font-size:12px; 
letter-spacing:.3em; 
font-weight:400; 
} 

p { 
font-family:'Crimson Text', serif; 
font-size:12px; 
line-height:16px; 
font-weight:400; 
margin-top:0; 
color:#000; 
text-align:justify; 
} 

.dropcap { 
font-family:'Crimson Text', serif; 
font-size:310%; 
line-height:65%; 
margin-top:3px; 
margin-right:6px; 
color:#333; 
display:inline-block; 
float:left; 
} 

#container { 
background:#FFF; 
height:698px; 
width:452px; 
padding:30px 30px 40px; 
} 

#imagediva { 
height:229px; 
width:127px; 
background:rgba(200,255,255,0.5); 
margin:0 0 10px 20px; 
} 

#imagedivb { 
height:180px; 
width:268px; 
background:rgba(200,255,255,0.5); 
margin:0 0 10px 20px; 
} 

.floatright { 
clear:right; 
float:right; 
} 

h1.short,h2.short { 
line-height:0; 
} 

的HTML

<div id="container"> 

<div class="floatright" id="imagediva"></div> 
<div class="floatright" id="imagedivb"></div> 

<h1 class="short">First Flight</h1> 
<hr size="1" noshade> 
<h2 class="short">1929</h2> 
<br> 
<p><span class="dropcap">W</span>alter’s first flight experience was in a two seater  open biplane when he was ten years old. His father hired a pilot take Walter and his cousin Victor Azevedo on a flight around the Oakland, CA. airport, the same airport from which Amelia Earhart would begin her ill fated attempt to circumnavigate the globe six years later in 1937. 
</p> 

</div> 

Answer 1

入住這Fiddle

提供絕對位置的段落標記，也給它一些寬度。這將解決您的問題。

body { 
background:#9CF; 
margin:0; 
padding:0; 
} 

h1 { 
font-family:Lusitana, serif; 
font-size:14px; 
letter-spacing:.3em; 
} 

h2 { 
font-family:'Crimson Text', serif; 
font-size:12px; 
letter-spacing:.3em; 
font-weight:400; 
} 

p { 
font-family:'Crimson Text', serif; 
font-size:12px; 
line-height:16px; 
font-weight:400; 
margin-top:0; 
color:#000; 
text-align:justify; 
position: absolute; 
width: 300px 
} 

.dropcap { 
font-family:'Crimson Text', serif; 
font-size:310%; 
line-height:65%; 
margin-top:3px; 
margin-right:6px; 
color:#333; 
display:inline-block; 
float:left; 
} 

#container { 
background:#FFF; 
height:698px; 
width:452px; 
padding:30px 30px 40px; 
} 

#imagediva { 
height:229px; 
width:127px; 
background:rgba(200,255,255,0.5); 
margin:0 0 10px 20px; 
} 

#imagedivb { 
height:180px; 
width:268px; 
background:rgba(200,255,255,0.5); 
margin:0 0 10px 20px; 
} 

.floatright { 
clear:right; 
float:right; 
} 

h1.short,h2.short { 
line-height:0; 
}