在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中定位文本的問題

回答

相關問題