[CSS]---div+css怎样放两张连续的图片在同一行?

22 篇文章 0 订阅

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值