此处如何使用浮动将联系人信息栏定位在照片下方。我大部分时间都在左边,但我想知道如何将最后的联系信息贴在图片上。
这是我希望它向上移动的地方,我无法这样做。这是当前的设置:
<div id='post'><div id='vpPhotos'>
<img src='Images/img.jpg'/><img src='Images/default.png'/><img src='Images/default.png'/><img src='Images/default.png'/></br><a id='posttitle' href='#?photoID=$photoID'>View More Pictures</a>
</div>
<div id='vpTitle'>
<h3>$eventTlt</h3>
</div>
<div id='vpprice'><b>Price: </b>$priceOfEvent</div>
<div id='vpdate'>
</br><b>Start Date:</b> <div class='float-right'>$eventSD </div>
</br><b>End Date:</b> <div class='float-right'>$eventED</div>
</br><b>Start Time:</b> <div class='float-right'> $eventTime </div>
<br/><b>Location Of Event:</b> <div class='float-right'>$location</div>
<br/><b>Address Of Location:</b> <div class='float-right'>$locationAddress</div></div>
<div id='eventdesc'>
</br></br><b>Description:</b>   $eventDesc </div>
<div id='vpcontact'>
</br><h3 align='left'><b>Contact Information</b></h3>   
</br><b>Name:</b>   $contactName
</br></br><b>Email:</b> $emailAddress</div>
<div style='clear:both;'/>
</div>
我都在漂浮着。在我所有其他 div 都向左浮动之后,我不确定那是正确的。#post
是最外层的,其余的基本可以用名字来形容。
#post{
border:3px inset red;
margin-right:20px;
}
#vpPhotos{
border:3px outset blue;
float:left;
width:25%;
}
#vpTitle{
float:left;
border:3px inset green;
}
#vpdate{
float:left;
width: 20%;
border:3px inset blue;
margin-right:100px;
padding-right:300px;
}
#eventdesc{
float:left;
width: 73.74%;
border:3px inset green;
}
#vpcontact{
float:left;
width: 24%;
border:3px inset red;
}
#vpprice{
float:right;
width: 15%;
border:3px inset black;
}