[英]Problems with positioning of text within HTML
我正在嘗試在圖像和項目符號點之間放置一段。 我認為我在html中具有正確的布局,但由於某種原因,它只是無法正確顯示。 見下圖:
如您所見,這些段落出現在其他所有內容下,但這並不是我的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;
}
您已經將Float:left
添加到僅right Div
,還需要使用以下代碼更新left div
.serviceCopy
{
float: left;
width: 721px;
}
同樣在2格之后,您將需要再增加1格來清除所有浮動
<div class="serviceIcon"></div>
<div class="serviceCopy"></div>
<div style="clear:both"></div>
這樣您的布局就不會損壞。
您是否正在嘗試使它變為圖像-計划和段落-子彈點?
要么
圖像-其他所有內容,以便圖像列在左側,其他所有內容在右側?
如果它是前者。
嘗試這個:
<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,並且項目符號是分開的。
然后將它們全部浮動。 並定義它們的寬度。 然后再添加一個div,以清除浮點數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.