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;
}

当图像向右浮动时，降落帽会改变位置

1 个答案: