0

画像と箇条書きの間に段落を配置しようとしています。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;
}
4

2 に答える 2

0

だけに追加Float:leftしました。次のコードでもright Div更新する必要がありますleft div

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

また、2 div の後、すべてのフロートをクリアするには、もう 1 つ div を追加する必要があります

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

レイアウトが崩れないように。

于 2012-12-19T11:46:16.173 に答える
0

画像 - プランとパラグラフ - 箇条書きになるようにしようとしていますか?

または

画像 - 画像の列が左側にあり、他のすべてが右側にあるように、他のすべては?

前者の場合。

これを試して：

<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 があり、箇条書きが分離されているようにします。

次に、それらすべてを左にフロートします。そしてそれらの幅を定義します。次に、もう 1 つ div を追加して、フロートをクリアします。

于 2012-12-19T13:02:41.460 に答える