div+css怎样放两张连续的图片在同一行？
首先，别简单的说用table，俺知道table可以很简单的解决这个问题，是这样的，其实我主要是做美工的，平时也习惯了用table做布局，但是毕竟这不是未来的趋势，俺也在学...
首先，别简单的说用table，俺知道table可以很简单的解决这个问题，
是这样的，其实我主要是做美工的，平时也习惯了用table做布局，但是毕竟这不是未来的趋势，俺也在学用div+css来布局，在网上找了很多教程，基本的原理还是明白的，但是，做header的时候，按table的方式我会切三张图片，然后用一行三列的表格就布局ok了，用div+css的话，是不是根本就不用考虑切图片的大小而直接切一张图呢？网上的教程里也只有一张图作为background-image的例子，所以在这里就只能请教大家了。。或者说，应该把三张图片定义三个div分别固定位置呢？
拜托了。。。越详细越好，若有补充说明一下腾讯主页的顶部910导航的css的追加至100分！~ 展开
是这样的，其实我主要是做美工的，平时也习惯了用table做布局，但是毕竟这不是未来的趋势，俺也在学用div+css来布局，在网上找了很多教程，基本的原理还是明白的，但是，做header的时候，按table的方式我会切三张图片，然后用一行三列的表格就布局ok了，用div+css的话，是不是根本就不用考虑切图片的大小而直接切一张图呢？网上的教程里也只有一张图作为background-image的例子，所以在这里就只能请教大家了。。或者说，应该把三张图片定义三个div分别固定位置呢？
拜托了。。。越详细越好，若有补充说明一下腾讯主页的顶部910导航的css的追加至100分！~ 展开
6个回答
展开全部
方法和详细的操作步骤如下：
1、第一步，创建一个新的html文件，并将其命名为test.html进行演示，见下图，转到下面的步骤。
2、第二步，执行完上面的操作之后，创建一个div模块并将其class属性设置为mydiv，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，使用img图片标签创建两个图片，并且src属性指向不同的图片路径，见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，使用“
*”初始化页面上所有元素的css样式，将内部边距设置为0，将外部边距设置为0，见下图，转到下面的步骤。
5、第五步，执行完上面的操作之后，设置div的样式，将其宽度设置为700px，将高度设置为400px，边框设置为1px，居中对齐，见下图，转到下面的步骤。
6、第六步，执行完上面的操作之后，设置图片的大小，宽度为280px，高度为200px。
为了使用图片的水平排列，需要使用float属性设置图片浮动的统一方向，见下图，转到下面的步骤。
7、第七步，执行完上面的操作之后，在浏览器中打开“test.html”文件，两张连续的图片已经在同一行，见下图。这样，就解决了这个问题了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
最好把图片放到
<div style="clear:both; width:600px">
<div style="float:left;width:300px"><img src="1.jpg"></div>
<div style="float:right;width:300px"><img src="1.jpg"></div>
</div>
好多喜欢用
<ul>
<li></li>
<li></li>
</ul>
控制li的float:left一般就可以了
<div style="clear:both; width:600px">
<div style="float:left;width:300px"><img src="1.jpg"></div>
<div style="float:right;width:300px"><img src="1.jpg"></div>
</div>
好多喜欢用
<ul>
<li></li>
<li></li>
</ul>
控制li的float:left一般就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是韩磊</title>
<style type="text/css">
.a{width: 300px;height: 50px; margin-right: 50px;float: left;}
.b{width: 300px;height: 50px;float: left;}
</style>
</head>
<body>
<div class="a"><a href="ssl.zzidc.com"><img src="1.jpg"></a></div>
<div class="b"><a href="ssl.zzidc.com"><img src="1.jpg"></a></div>
</div>
</body>
</html>
可以使用浮动布局让2张图片位于同一行上
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000;
}
#head{
margin-right:auto; margin-left:auto; width:770px; height:80px; background:#A66300;
}
.nav{
clear:both; margin-right:auto; margin-left:auto; width:770px; height:25px; line-height:25px; background:#415800;
}
#main_box{
/*正文区大容器*/
width:770px; margin-right:auto; margin-left:auto; background:#EFEFEF;
}
.row{
/*定义每行*/
width:100%; clear:both;
}
.left,.right{ float:left; width:150px; background:#A6A6A6;
}
.right{ float:right;}
.left2{
/*用在四列布局上*/
float:left; width:235px; background:#333; color:#FFF;
}
.left3{
/*用在五列布局上*/
border-right:1px solid #FFF; width:153px; background:#888; float:left;
}
.middle{
width:470px; background:#6699CC; float:left;
}
#foot{
margin-right:auto; margin-left:auto; width:770px; background:#A66300; clear:both;
}
-->
</style>
</head>
<body>
<div id="head"></div>
<div class="nav"></div>
<!--内容区开始-->
<div id="main_box">
<!--三列左侧-->
<div class="row">
<div class="left"><p></p></div>
<div class="middle"><p></p></div>
<div class="right"><p></p></div>
</div>
<!--三列结束-->
<div class="nav">nav</div>
<!--四列开始-->
<div class="row">
<div class="left2"> <p>四列的第一列</p> <p> </p></div>
<div class="left"><p>四列的第二列</p><p> </p></div>
<div class="left2"> <p>四列的第三列</p> <p> </p></div>
<div class="right"> <p>四列的第四列</p> <p> </p></div>
</div>
<!--四列结束-->
<div class="nav">nav</div>
<!--五列开始-->
<div class="row">
<div class="left3"> <p>这是五列的第一列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第二列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第三列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第四列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第五列</p> <p> </p> <p> </p></div>
</div>
</div>
<!--尾部区-->
<div id="foot">
</div>
<!--End-->
</body>
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000;
}
#head{
margin-right:auto; margin-left:auto; width:770px; height:80px; background:#A66300;
}
.nav{
clear:both; margin-right:auto; margin-left:auto; width:770px; height:25px; line-height:25px; background:#415800;
}
#main_box{
/*正文区大容器*/
width:770px; margin-right:auto; margin-left:auto; background:#EFEFEF;
}
.row{
/*定义每行*/
width:100%; clear:both;
}
.left,.right{ float:left; width:150px; background:#A6A6A6;
}
.right{ float:right;}
.left2{
/*用在四列布局上*/
float:left; width:235px; background:#333; color:#FFF;
}
.left3{
/*用在五列布局上*/
border-right:1px solid #FFF; width:153px; background:#888; float:left;
}
.middle{
width:470px; background:#6699CC; float:left;
}
#foot{
margin-right:auto; margin-left:auto; width:770px; background:#A66300; clear:both;
}
-->
</style>
</head>
<body>
<div id="head"></div>
<div class="nav"></div>
<!--内容区开始-->
<div id="main_box">
<!--三列左侧-->
<div class="row">
<div class="left"><p></p></div>
<div class="middle"><p></p></div>
<div class="right"><p></p></div>
</div>
<!--三列结束-->
<div class="nav">nav</div>
<!--四列开始-->
<div class="row">
<div class="left2"> <p>四列的第一列</p> <p> </p></div>
<div class="left"><p>四列的第二列</p><p> </p></div>
<div class="left2"> <p>四列的第三列</p> <p> </p></div>
<div class="right"> <p>四列的第四列</p> <p> </p></div>
</div>
<!--四列结束-->
<div class="nav">nav</div>
<!--五列开始-->
<div class="row">
<div class="left3"> <p>这是五列的第一列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第二列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第三列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第四列</p> <p> </p> <p> </p></div>
<div class="left3"> <p>这是五列的第五列</p> <p> </p> <p> </p></div>
</div>
</div>
<!--尾部区-->
<div id="foot">
</div>
<!--End-->
</body>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.bg1{
background:url(bg1.gif);
width:100px;
height:100px;
float:left;}
.bg2{
background:url(bg2.gif);
width:100px;
height:100px;
float:left;}
.bg3{
background:url(bg3.gif);
width:100px;
height:100px;
float:left;}
-------------------
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
background:url(bg1.gif);
width:100px;
height:100px;
float:left;}
.bg2{
background:url(bg2.gif);
width:100px;
height:100px;
float:left;}
.bg3{
background:url(bg3.gif);
width:100px;
height:100px;
float:left;}
-------------------
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
