Question

你好左边有一张图片，然后是右边的文字段落。我希望在第一段下面有一个greyline，但它跨越了浮动图像下的父div的整个长度，是否有一种方法只是在第一段下面有边界线？

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}

Answer 1

Overflow:hidden

在段落.greyline

上

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

Answer 2

将display样式.greyline更改为inline-block而不是block：

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

请参阅此jsFiddle

Answer 3

是 - 向左移动.greyLine段。

Answer 4

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

浮动.greyLine <p>左

停止边界线下浮动图像？

4 个答案: