我必须在两列中显示 4 条带有图片、日期和出版标题的新闻 - 左列是图片，右列是日期和标题。
尝试了不同的方法使用 dl 和现在使用类 dl 的 div 来实现排列，仅在 FF 和 IE8 和 9 中有效。
IE7 没有应用我想要的对齐方式。
安排jsfiddle 进行测试 - 当结果窗口比平时更宽时会出现问题。
也会接受有关显示新闻的更好 HTML 结构的建议。
【问题讨论】：
标签： html css internet-explorer-7
enter code here
试试这个 html：
<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/
【讨论】：
为了您的快速参考，我将fiddle 签出
问题是你把width 560px;的部分放在里面，里面的内容会超出限制，所以会出现问题。以及宽度最大的<p>标签
变化：
.dl .dd p{
width: 210px; //changed
font-size: 0.7em;
font-style: italic;
}
对于每个带有主 div 的 dd,dt div surrond
<div class="fix_float">
<dt>
date content
</dt>
<dd>
text content
</dd>
</div>
【讨论】：
这里是工作版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 在内的所有浏览器中正确显示元素。
【讨论】：
<div style="clear:both"></div>
将它放在每个项目之间可以修复 IE7。或者从 html5 样板中获取 clearfix http://html5boilerplate.com/
或者，您可以将每个 dt/dd 对包装在一个 div 中
【讨论】：
:before 和 :after 在 IE7 中不起作用
【讨论】：