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将样式更改为.greylinetoinline-block而不是block：

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

看到这个jsFiddle

于 2012-07-30T11:44:34.650 回答
0

.greyLine是的 - 将段落向左浮动。

于 2012-07-30T11:41:50.753 回答
0

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

将 .greyLine<p>向左浮动

于 2012-07-30T11:42:55.013 回答