首页 新闻 搜索 专区 学院

DIV+CSS布局问题

0
悬赏园豆: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;}

 

Fencer的主页 Fencer | 初学一级 | 园豆:7
提问于:2010-12-16 22:28
< >
分享
最佳答案
1

你的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)
1

第一、把所有的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
1

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

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

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

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

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

<div class="">
           <ul class="">
              <li><a href="">
                       <img width="99px" height="77px" alt="" src="img/1.jpg" /></a><br><a href="">图片</a></li>
           </ul>  
           <ul class="rightUL1_3">
               <li><a href="">
                       <img width="99px" height="77px" alt="" src="img/1.jpg" /></a><br><a href="">图片</a></li>
           </ul>
           <ul class="rightUL1_3">
                <li><a href="<?=$bqr[hplike]?>">
                       <img width="99px" height="77px" alt="" src="img/1.jpg" /></a><br><a href="">图片</a></li>
           </ul>
     </div>

使用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>

<body>
 <div style="width:330px;" align="center">
     <div style="float:left;width:100px;margin:0 0 0 10px">
         <div>
              <img src="img/1.jpg" width="100px" />
                
            </div>
            <div align="center">图片1</div>
        </div>
        <div style="float:right;width:100px; margin:0 0 0 10px">
         <div>
              <img src="img/1.jpg" width="100px" />
            </div>
            <div align="center">图片1</div>
        </div>
        <div style="float:right;width:100px;margin:0 0 0 10px">
         <div>
              <img src="img/1.jpg" width="100px" />
            </div>
            <div align="center">图片1</div>
        </div>
    </div>
</body>
</html>

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

收获园豆:6
dinoy | 园豆:160 (初学一级) | 2010-12-17 10:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册