我必须以两列的方式显示4条有图像,日期和出版物标题的新闻 - 左栏为图像,右栏为日期和标题。
尝试使用dl的不同方法,现在使用类dl进行div以实现排列,仅在FF和IE8和9中工作。
IE7不适用我想要的对齐方式。
安排jsfiddle进行测试 - 问题显示结果窗口比平时更宽。
也会接受有关更好的HTML结构显示新闻的建议。
答案 0 :(得分:2)
<div style="clear:both"></div>
将它放在每个项目之间为IE7修复它。或者从html5样板中获取clearfix http://html5boilerplate.com/
或者,您可以将每个dt / dd对包装在div
中答案 1 :(得分:2)
这是工作版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和&amp; 7。
答案 2 :(得分:1)
:before
和:after
在IE7中不起作用
答案 3 :(得分:1)
为了您的快速参考,我将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>
答案 4 :(得分: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/
中