CSS對齊問題與div和IMG浮動：留在IE7

Question

我必須顯示4新聞與圖像，日期和出版物的標題在兩列 - 圖像的左列，日期和標題的右列。

嘗試不同的方法使用DL和現在用類DL div來實現的安排，僅工作在FF和IE8和9

IE7犯規申請對準我想要的。

安排jsfiddle進行測試 - 問題顯示結果窗口比平時寬。

也會接受更好的顯示新聞HTML結構的建議。

Answer 1

<div style="clear:both"></div> 

把那間每個項目修復它的IE7。或乘坐clearfix從HTML5樣板 http://html5boilerplate.com/

或者你可以用每個DT/DD對在一個div

Answer 2

:before和:after不工作在IE7

看到:after and :before css pseudo elements hack for IE 7

Answer 3

這裏的工作版本Check the updated jsfiddle

請找到CSS及以下HTML結構的變化： -

CSS：

#section{ 
    width: 560px; 
    float: left; 
    font-size: 0.8em; 
    position: relative; 
} 
.dl .dd h4{ 
    font-size: 0.9em; 
} 
.dl h4 a{ 
    text-decoration: none; 
    font-weight: normal; 
} 
.dl h4 a:hover{ 
    text-decoration: underline; 
} 
.dl .dt{ 
    float: left; 
    width: 100px; 
    height: 75px; 
    font-size: 0.5em; 
    margin: 0 0 5px 0; 
} 
.dl .dd{ 
    width: 480px; 
    float: right; 
} 
.dl .wrapper { /* new element added */ 
    overflow: hidden; 
    height: 100%; 
    padding: 10px 0 5px; 
} 
.dl .dd p{ 
    font-size: 0.7em; 
    font-style: italic; 
} 


/* No need of this code 
.dl:after, 
.dl .dt:after, 
.dd:after, 
.dl .dt img:after 
{ 
    content:""; 
    height: 0; 
    clear: both; 
    display: block; 
} 
*/ 

HTML：

<div class="dl"> 
    <div class="wrapper"> 
     <div class="dt"><img src="/news_pics/16.jpg" alt="pic 1" width="100px" height="75px"/> </div> 
     <div class="dd"><p>12 06 2012</p><h4><a href="#">News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf</a></h4></div> 
    </div> 
    <div class="wrapper"> 
     <div class="dt"><img src="/news_pics/16.jpg" alt="pic 2" width="100px" height="75px"/></div> 
     <div class="dd"><p>21 05 2012</p><h4><a href="#">News 2 title</a></h4></div> 
    </div> 
    <div class="wrapper"> 
     <div class="dt"><img src="/news_pics/16.jpg" alt="pic 3" width="100px" height="75px"/></div> 
     <div class="dd"><p>19 05 2012</p><h4><a href="#">News 3 title title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf</a></h4></div> 
    </div> 
    <div class="wrapper">  
     <div class="dt"><img src="/news_pics/16.jpg" alt="pic 4" width="100px" height="75px"/></div> 
     <div class="dd"><p>8 05 2012</p><h4><a href="#">News 4 title</a></h4></div> 
    </div>  

編輯：

的<div class="wrapper"有助於清除float並在所有瀏覽器中正確顯示的元素，包括IE6 & 7.

Answer 4

對於你的快速參考我把fiddle結帳這

問題是你把width 560px;部分和內容將超過限制，使問題發生。和<p>標籤具有最高寬度

變化：

.dl .dd p{ 
    width: 210px; //changed 
    font-size: 0.7em; 
    font-style: italic; 
} 

每一個DD，DT DIV用來包圍與主DIV

<div class="fix_float"> 
    <dt> 
     date content 
    </dt> 
    <dd> 
     text content 
    </dd> 
</div> 

Answer 5

enter code here 

試試這個網站：

<ul class="ul"> 
    <li class="li"> 
     <img src="/news_pics/16.jpg" class="thumb" width="100" height="75"> 
     <div class="text"> 
      <p class="date"> 
       12 06 2012 
      </p> 
      <h4> 
       <a href="" class="title"> 
        News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf 
       </a> 
      </h4> 
     </div> 
    </li> 
    <li class="li"> 
     <img src="/news_pics/16.jpg" class="thumb" width="100" height="75"> 
     <div class="text"> 
      <p class="date"> 
       12 06 2012 
      </p> 
      <h4> 
       <a href="" class="title"> 
        News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf 
       </a> 
      </h4> 
     </div> 
    </li> 
</ul> 

和css

.ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
.li { 
overflow: hidden; 
margin-bottom: 5px; 
} 
.thumb { 
float: left; 
width: 100px; 
height: 75px; 
} 
.text { 
margin-left: 120px; 
} 
.title { 
font-size: 0.9em; 
text-decoration: none; 
font-weight: normal; 
} 
.title:hover { 
text-decoration: underline; 
} 

中的jsfiddle http://jsfiddle.net/sgMKy/