Question

图像以div向下3/4开始，我无法理解为什么 - 我希望它位于顶部，文本应位于左侧，图像位于右侧。

我玩过浮动，清晰和内联显示，但没有任何改变。

HTML

<div class="ipslist">

  <p><strong> Why choose IPS Fire & Security? </strong></p>
  <br />

  <ul>
    <li> Service 365 24/7 </li>
    <li> Engineer on site within 4 hours </li>
    <li> Insurance Approved </li>
    <li> Established over 10 years </li>
    <li> We are the UK's most loved security service! (thebestof)</li>
    <li> SSAIB & BAFE Accreditation </li>
    <li> 24 hour technical support</li>
  </ul>

  <img src="Images/vanbluefence.jpg"/>

</div>

CSS

.ipslist{
  height: 250px;
  width: 950px;
  margin-right: auto;
  margin-left: auto;    
  font-family: 'Open Sans', Arial, sans-serif;
}

.ipslist img {
  float:right;  
}

Answer 1

将display:inline-block添加到ul

Ul是块元素，因此它占据整个空间并将图像推送到下一行。

<强> DEMO

Answer 2

尝试在图像上使用绝对定位，但请确保容器未定位为静态（默认设置）。

.ipslist {
   height: 250px;
   width: 950px;
   margin-right: auto;
   margin-left: auto;  
   font-family: 'Open Sans', Arial, sans-serif;
   position: relative;
 }

.ipslist img {
   position: absolute;
   top: 0;
   right: 0;
}

Answer 3

最好将所有文字包装在一个div中并将div向左移动。

<强> HTML

<div class="ipslist">
    <div class='content-wrapper'>
        <p><strong> Why choose IPS Fire & Security? </strong></p>
        <br />
        <ul>
            <li> Service 365 24/7 </li>
            <li> Engineer on site within 4 hours </li>
            <li> Insurance Approved </li>
            <li> Established over 10 years </li>
            <li> We are the UK's most loved security service! (thebestof)</li>
            <li> SSAIB & BAFE Accreditation </li>
            <li> 24 hour technical support</li>
        </ul>
    </div>
    <img src="Images/vanbluefence.jpg"/>
</div>

<强> CSS

.ipslist {
    height: 250px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;  
    font-family: 'Open Sans', Arial, sans-serif;
}
.ipslist .content-wrapper{
    float:left;
    width: calc(100% - <width of image>)
}
.ipslist img {
    width:<width of image>; height:auto; 
    float:right;
}

此外，您还可以float:left同时.content-wrapper和图片，然后在clear:both上应用img。

Answer 4

我想你想要这样的东西http://jsfiddle.net/cv8M6/

将图像放在ipslist之后并添加

.ipslist{
    float:left;
}

#floatingImage{
    float:right; 
}

图像没有正确定位

4 个答案: