阻止邊框線在浮動圖像下移動？

嗨有一個圖像左側浮動，然後右邊的文本段落。我想在第一段有一個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

阻止邊框線在浮動圖像下移動？

回答

相關問題