在HTML中定位文本的问题

我想在图像和项目符号点之间定位一段。我认为我在HTML中有正确的布局，但由于某种原因它只是不能正确显示。请参见下面的图片：在HTML中定位文本的问题

enter image description here

正如你可以看到，该段出现在一切，但是这是它是不是我有多么HTML中显示。请参见下面的代码：

HTML：

<div class="services"> 
     <div class="serviceHolder" style="opacity: 1;"> 
      <div class="serviceBox" id="service-plan"> 
       <div class="serviceIcon"><img src="images/icon-design.jpg" width="129" height="134" alt="design icon"></div> 
       <div class="serviceCopy"> 
        <h2>Plan</h2> 
        <ul class="serviceBullets"> 
         <li><h3>Objectives</h3></li> 
         <li><h3>Scope</h3></li> 
         <li><h3>Sitemap</h3></li> 
         <li><h3>Wireframes</h3></li> 
        </ul> 
        <p>Lorem ipsum dolor sit amet, porta quis urna tempor vestibulum purus, vulputate condimentum arcu faucibus aliquam enim accumsan, a nulla nullam morbi bibendum eveniet tempus, parturient consequat sociis quis. Suscipit in vitae ornare lobortis sed, porta et minima odio neque maecenas cras, justo in. </p> 
        <p>Justo arcu lacus, quos pellentesque nam sit. Luctus mauris egestas, leo nisl porttitor urna scelerisque ut, mauris sodales sapien donec dolor, arcu a ante vestibulum lorem vitae quam</p> 
       </div> 
      </div> 
     </div>

CSS：

.services { 
width: 100%; float: left; margin: 30px 0; 
} 

.services .serviceBox { 
width: 898px; padding: 30px; border: 1px solid #43C0C2; background-color: white; float:  left; margin-bottom: 10px; 
} 

.services .serviceIcon { 
float: left; margin: 0 30px 50px 0; width: 129px; 
} 

.serviceBullets { 
float: right; font-weight: 100; width: 150px; 
} 

.serviceBullets li { 
list-style-image: url(../images/bullet.gif); color: #43C0C2; margin-bottom: 10px; 
} 

.services h2 { 
font-size: 40px; margin-bottom: 20px; color: #000000; 
}

来源

2012-12-19 user1278496

请指定哪个浏览器 - http://jsfiddle.net/SsCZT/在FF和IE中似乎确定。 – easwee

您已经添加Float:left只是right Div而已，你需要用下面的代码更新您left div也

.serviceCopy 
{ 
    float: left; 
    width: 721px; 
}

同样在2 div之后，您将需要再添加一个di v清除所有漂浮物

<div class="serviceIcon"></div> 
<div class="serviceCopy"></div> 
<div style="clear:both"></div>

使您的布局不会中断。

来源

2012-12-19 11:46:16

请停止推荐这种清晰的方法。这是行不通的。这是推荐的方法。 http://nicolasgallagher.com/micro-clearfix-hack/ –

你想让它变得如此吗图像 - 计划和段落 - 爆炸点？

或者

图像 - 其他的一切，使图像列在左边，其他的一切都是对的吗？

如果它的前者。所以

<div class="serviceHolder" style="opacity: 1;"> 
     <div class="serviceBox" id="service-plan"> 
      <div class="serviceIcon"><img src="images/icon-design.jpg" width="129" height="134" alt="design icon"></div> 
      <div class="serviceCopy"> 
      <h2>Plan</h2> 
       <p>Lorem ipsum dolor sit amet, porta quis urna tempor vestibulum purus, vulputate condimentum arcu faucibus aliquam enim accumsan, a nulla nullam morbi bibendum eveniet tempus, parturient consequat sociis quis. Suscipit in vitae ornare lobortis sed, porta et minima odio neque maecenas cras, justo in. </p> 
       <p>Justo arcu lacus, quos pellentesque nam sit. Luctus mauris egestas, leo nisl porttitor urna scelerisque ut, mauris sodales sapien donec dolor, arcu a ante vestibulum lorem vitae quam</p> 
      </div> 
      <div class="serviceBullets"> 
       <ul> 
        <li><h3>Objectives</h3></li> 
        <li><h3>Scope</h3></li> 
        <li><h3>Sitemap</h3></li> 
        <li><h3>Wireframes</h3></li> 
       </ul> 
      </div> 
     </div> 
    </div>

，它有它自己的股利和子弹是分开的：

试试这个。

然后将其全部留下。并定义它们的宽度。然后再添加一个div来清除浮动。

来源

2012-12-19 13:02:41 user1906005

在HTML中定位文本的问题

回答

相关问题