阻止边框线在浮动图像下移动？

嗨有一个图像左侧浮动，然后右边的文本段落。我想在第一段有一个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}

来源

2012-07-30 davey

Overflow:hidden

.greyline

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

来源

2012-07-30 11:44:11 Gijs

是 - 浮动.greyLine款离开了。

来源

2012-07-30 11:41:50 Utkanos

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

浮在.greyLine <p>上段左

来源

2012-07-30 11:42:55 Andy

感谢您的输入，但如果我这样做，那么下一段转到一个浮动这是不是我想要的东西的权利。此外，如果我最小化窗口文本不环绕图像 – davey 2012-07-30 11:46:55

更改display风格的.greyline到inline-block，而不是block：

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

看到这个jsFiddle

来源

2012-07-30 11:44:34

阻止边框线在浮动图像下移动？

回答

相关问题