Css 如何使用float来定位列?
如何在此处使用float将联系人信息栏定位在照片下方。我大部分时间都在左上下浮动,但我想知道如何将最后的联系信息与图片粘在一起 这就是我想要它向上移动的地方,我无法做到。 以下是当前设置:Css 如何使用float来定位列?,css,position,css-float,multiple-columns,Css,Position,Css Float,Multiple Columns,如何在此处使用float将联系人信息栏定位在照片下方。我大部分时间都在左上下浮动,但我想知道如何将最后的联系信息与图片粘在一起 这就是我想要它向上移动的地方,我无法做到。 以下是当前设置: <div id='post'><div id='vpPhotos'> <img src='Images/img.jpg'/><img src='Images/default.png'/><img src='Images/default.png'/>
<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放在一个单独的div中,将其浮动,并将所有其他div放在另一个也浮动的div中 更新代码: HTML:
谢谢我可以看到,将块分离到两侧浮动是这里的解决方案!没问题。它仍然需要一些调整来调整宽度以匹配,但这应该让您了解它需要如何构造。
#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;
}
<div id='post'>
<div id='column-one'>
<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='vpcontact'>
<h3 align='left'><b>Contact Information</b></h3>   
</br><b>Name:</b>   $contactName
</br></br><b>Email:</b> $emailAddress
</div>
</div>
<div id="column-two">
<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>
<div style='clear:both;'/>
</div>
#post {
border: 3px inset red;
margin-right: 20px;
}
#column-one,
#column-two {
float: left;
width: 24%;
}
#column-two {
width: 76%;
}
#vpPhotos {
border: 3px outset blue;
width: 98%;
float: left;
}
#vpTitle {
float: left;
width: 80%;
border: 3px inset green;
}
#vpdate {
width: 99%;
float: left;
border: 3px inset blue;
}
#eventdesc {
float: left;
width: 99%;
border: 3px inset green;
}
#vpcontact {
float: left;
width: 98%;
border: 3px inset red;
}
#vpprice {
float: right;
width: 15%;
border: 3px inset black;
}