我必须在两列中显示 4 条带有图像、日期和出版标题的新闻 - 左列用于图像，右列用于日期和标题。
尝试使用 dl 和现在使用 dl 类的 div 来实现排列的不同方法，仅在 FF 和 IE8 和 9 中有效。
IE7 不应用我想要的对齐方式。
安排jsfiddle进行测试 - 当结果窗口比平时更宽时，问题会显示出来。
也将接受有关显示新闻的更好 HTML 结构的建议。
问问题
1417 次
5 回答
2
这是工作版本检查更新的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 在内的所有浏览器中正确清除和显示元素。
于 2012-06-21T08:14:30.877 回答
2
<div style="clear:both"></div>
将它放在每个项目之间可以为 IE7 修复它。或者从 html5 样板 http://html5boilerplate.com/中获取 clearfix
或者，您可以将每个 dt/dd 对包装在一个 div 中
于 2012-06-21T08:11:21.303 回答
1
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/
于 2012-06-21T08:30:46.467 回答
1
为了您的快速参考，我把小提琴结帐这个
存在的问题是您放置该部分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>
于 2012-06-21T08:16:36.990 回答
1
:before并且:after不在 IE7 中工作
于 2012-06-21T08:06:13.910 回答