0

我正在尝试尽可能接近地复制 html 中一本书的外观，其中包括向左浮动的首字下沉和向右浮动的多个图像。1 张图片向右浮动时一切正常……但是当超过 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>
4

1 回答 1

0

检查这个小提琴

为段落标签提供绝对位置，并为其提供一些宽度。这将解决您的问题。

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;
}
于 2013-08-18T05:51:28.697 回答