我需要顶部,中部和底部的图像位于这些div中文本的右侧。此刻,即使图像朝右,文字离开,图像也位于段落位置下方。我已经应用了reset.css。
这是相关的HTML和CSS
Index.html摘录:
<Div id="background">
<div id="Space">
</div><!--spacing between divs-->
<article id="Top">
<h2>Flower arrangement</h2>
<p>Our team of professional designers will make your event memorable and stress free. We will design to your theme, colour, budget and needs with attention to detail given high priority.</p>
<img src="Images/Top_Image.gif" alt="" width="207" height="195">
<a href="#" >Read More </a>
</article>
<div id="Top_box">
</div><!--spacing between divs-->
<article id="Middle">
<h2>Seed Library</h2>
<p>Don't be afraid to try growing your own plants, you will be surprised how easy seed germination really is. A large variety of native seed mixes are offered, ideal for creating sustainable wildflower gardens.</p>
<a href="#" >Read More </a>
<img src="Images/Middle_picture.gif" alt="" width="208" height="216">
</article>
<div id="Middle_box">
</div><!--spacing between divs-->
<article id="Review">
<h2>Ran Dome said:</h2>
<p>'I have never had such an outstanding experience with such a wonderful group of people who understood my needs'</p>
<img src="Images/Review_picture.gif" alt="" width="93" height="120">
</article>
<div id="Review_box">
</div><!--spacing between divs-->
<article id="Bottom">
<h2>Sustainability</h2>
<p>Belinda Aspect founded Aspect in April 1985 and is a leading expert on green floral design. Belinda's dual passions for floral design and sustainability were merged when she decided that The Aspect would 'go green'.</p>
<a href="#" >Read More </a>
<img src="Images/Bottom_picture.gif" alt="" width="208" height="216">
</article>
<div id="Bottom_box">
</div><!--spacing between divs-->
</Div><!--background picture Div-->
style.css extract:
#background {
background-image: url(Images/background.jpg);
background-repeat: no-repeat;
width:100%;
}
#catch_line{
color: #7f6e99;
height: 50%px;
width: 57%;
margin-left: 6%;
margin-top:132px;
background-color: #000000;
border-radius: 5px;
}
#catch_line h1{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 3.4em;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
paddingtop: 50px;
color: #7f6e99;
}
article#Top, article#Review {
width: 100%;
height: 200px;
border-radius: 5px;
background-color: #7a9c52;
}
article#Middle, article#Bottom {
width: 100%;
height: 200px;
border-radius: 5px;
background-color: #2d6d18;
}
article#Top h2, article#Middle h2, article#Bottom h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.6em;
color: #0c1306;
padding-bottom: 2%;
word-spacing: 2px;
padding-top: 3%;
padding-left: 6%;
margin right: 0px;
}
article#Top p, article#Middle p, article#Bottom p{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
color: #0c1306;
width: 70%;
clear: none;
display:block;
padding-left: 6%;
padding-bottom: 2%;
margin right: 0px;
}
article#Top a, article#Middle a, article#Bottom a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.7em;
color: #dc3646;
text-decoration: none;
clear: none;
float: left;
padding-left: 6%;
margin right: 0px;
}
article#Top img, article#Middle img, article#Bottom img{
float: right;
margin-right: 20px;
clear: none;
width: 140px;
height: 140px;
display:block;
margin left: 0px;
}
article#Review h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.6em;
color: #0c1306;
padding-bottom: 2%;
word-spacing: 2px;
padding-top: 2.5%;
text-align: center;
}
article#Review p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-style: italic;
font-size: 1em;
color: #0c1306;
text-align:center;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 0.5%;
}
article#Review img{
margin-left: auto;
margin-right: auto;
display:block;
height: 78px;
width:62px;
}
#Space, #Top_box, #Middle_box, #Review_box, #Bottom_box{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
height: 80px;
clear: both;
}
我也知道我可以改变它,以便文章有边距而去除间距div以获得与我想要的效果相同的效果,但我现在并不关心它。< / p>