DIV+CSS布局问题

悬赏园豆：30 [已解决问题] 解决于 2012-02-29 14:28

麻烦帮我看看，很简单的问题

1、为什么有了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >就布局错乱了

2、我想要的效果：每行3个图片，文字在图片下面居中，外围有灰色的边框，谢了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<link href="my.css" rel="stylesheet" type="text/css" />
<div class="n_info_txt w700">
    <div class="fy photo">
        <a href="#">
        <img class="person2 md"  src="images/peo.jpg" width="110" height="130"/>
        这个测试标题1
        </a>
    </div>  
    <div class="fy photo">
        <a href="#">
        <img class="person2 md"  src="images/peo.jpg" width="110" height="130"/>
        这个测试标题1
        </a>
    </div>  
    <div class="fy photo">
        <a href="#">
        <img class="person2 md"  src="images/peo.jpg" width="110" height="130"/>
        这个测试标题1
        </a>
    </div>  
    <div class="fy photo">
        <a href="#">
        <img class="person2 md"  src="images/peo.jpg" width="110" height="130"/>
        这个测试标题1
        </a>
    </div>  
    <div class="fy photo">
        <a href="#">
        <img class="person2 md"  src="images/peo.jpg" width="110" height="130"/>
        这个测试标题标题标题
        </a>
    </div>  
</div>

body{
    margin: 0;
    padding: 0;
    line-height:1.4;
    background: #f7f7f7;
}

.person2 {
    padding: 4px;
    border: 1px solid #ccc;
    margin-right: 8px;
}
.photo
{
    float:left;
    margin:5px 0px 5px 10px;
    width:200px;
    height:150px;
    text-align:center;
}
img {display: block;}
.w700 
{
    width:700px;
}


.n_info_txt{ margin:10px auto 10px auto; color:#444444; border:solid 1px #dddddd; }

.fy{ height:30px; line-height:30px; text-align:center; color:#444444;}
.fy a{color:#444444; text-decoration:none;}
.fy a:hover{ color:Red; text-decoration:underline;}

Web前端

Fencer | 初学一级 | 园豆：7
提问于：2010-12-16 22:28

< >

最佳答案

你的html标签没有闭合，不知道是不是你没有复制完整。css文件我已经改过，有加上注释，改过后效果图如下：

html文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="my.css">
<title>无标题文档</title>
</head>
<body>

    <div class="n_info_txt w700">
        <div class="fy photo">
            <a href="#">
            <img class="person2 md" src="images/peo.jpg" width="110" height="130"/>
            这个测试标题1
            </a>
        </div> 
        <div class="fy photo">
            <a href="#">
            <img class="person2 md" src="images/peo.jpg" width="110" height="130"/>
            这个测试标题1
            </a>
        </div> 
        <div class="fy photo">
            <a href="#">
            <img class="person2 md" src="images/peo.jpg" width="110" height="130"/>
            这个测试标题1
            </a>
        </div> 
        <div class="fy photo">
            <a href="#">
            <img class="person2 md" src="images/peo.jpg" width="110" height="130"/>
            这个测试标题1
            </a>
        </div> 
        <div class="fy photo">
            <a href="#">
            <img class="person2 md" src="images/peo.jpg" width="110" height="130"/>
            这个测试标题标题标题
            </a>
        </div> 
</div>
</body>
</html>

css文件如下：

body{
margin: 0;
padding: 0;
line-height:1.4;
background: #f7f7f7;
}

.person2 {
padding: 4px;
border: 1px solid #ccc;
margin-left:40px;/*让相框居中显示，你原来是margin-right: 8px;*/
}
.photo
{
float:left;
margin:5px 0px 5px 10px;
width:200px;
height:150px;
text-align:center;
}
img {display: block;}
.w700 
{
width:700px;

height:600px;/*给最外面的div添加一个高度，不然撑不开*/
}


.n_info_txt{ margin:10px auto 10px auto; color:#444444; border:solid 1px #dddddd; }
/*把height:30改成height:180,你原来样式乱了主要是这个div高度不够没有撑开*/
.fy{ height:180px; line-height:30px; text-align:center; color:#444444;}
.fy a{color:#444444; text-decoration:none;}
.fy a:hover{ color:Red; text-decoration:underline;}

收获园豆：6

流水殇 | 菜鸟二级 |园豆：404 | 2010-12-17 12:50

其他回答(4)

第一、把所有的img<img class="person2 md" src="images/peo.jpg" width="196" height="130"/>

第二、.fy{ height:160px; line-height:30px; text-align:center; color:#444444;}

试试

收获园豆：6

VanJames2010 | 园豆：321 (菜鸟二级) | 2010-12-16 22:52

img都display:block了但是 .person2有个属性margin-right；8px ，这个原因有可能引起布局错乱

收获园豆：6

爱研究源码的javaer | 园豆：930 (小虾三级) | 2010-12-17 09:05

给文字加上<span>标签，像下边这样

<span style="margin-right: 70px;"> 这个测试标题1 </span>

收获园豆：6

程序新青年 | 园豆：841 (小虾三级) | 2010-12-17 10:10

使用div+UL来写。

补充下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

你可以根据这个再按照自己的要求更改下。

收获园豆：6

dinoy | 园豆：160 (初学一级) | 2010-12-17 10:10

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

DIV+CSS布局问题

欢迎，请先登录或者注册。