1

こんにちは、画像が左に浮かんでいて、その右側にテキストの段落があります。最初の段落の下にグレーラインを配置したいのですが、フロート画像の下にある親divの全長にまたがっています。最初の段落の下に境界線を配置する方法はありますか？

http://jsfiddle.net/9GkZf/1/

HTML

 <div id = landpgcontent class="margintop20 ofh">
                            <div id="landpgtext" class="txtblack ofh">
                                <img id="landpgpic" src="Images/Shared/BlankImage.gif" alt="No Image" class="floatleft">
                                <p class="phdr bold greyline marginbot10">Sed ut perspiciatis unde omnis iste natus error</p>
                                <p>Totam rem aperiam, eaque quae ab illo quas lorem ipsum dolor sit.Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo itatis et quasi architecto.</p>
                                <p></br> Nemo enim ipsam voluptatem quia oluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni itatis et quasi architecto quia non numquam eius modi tempora incidunt ut la xercitationem ullam corporis suscipit laboriosam, nis iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae conseq ntur magni itatis et quasi architecto quia non numquam eius modi tempora incidunt ut la xercitationem ullam.</p>
                            </div>
                        </div>

CSS

.floatleft {float: left;}
.floatright {float: right;}
.ofh{overflow: hidden;}

/*Content*/
img#landpgpic {width: 226px; height: 172px; margin-right: 20px;}
div#landpgtext {line-height: 1.3em;}
.greyline {border-bottom: 1px solid #b9b8b8;  display:block}​
4

4 に答える 4

2 
Overflow:hidden

段落.greyline

http://jsfiddle.net/9GkZf/4/

于 2012-07-30T11:44:11.177 に答える
1

displayのスタイルを.greyline：のinline-block代わりにに変更します。block

.greyline {border-bottom: 1px solid #b9b8b8;  display:inline-block}

このjsFiddleを参照してください

于 2012-07-30T11:44:34.650 に答える
0

http://jsfiddle.net/9GkZf/3/

.greyLine<p>を左にフロート

于 2012-07-30T11:42:55.013 に答える
0

はい-.greyLine段落を左にフロートさせます。

于 2012-07-30T11:41:50.753 に答える