div+css中 四个图片在一行中间距相等，左右靠两边 55
.grid{position:relative;clear:both;margin:0auto;max-width:100%;list-style:none;text-a...
.grid {
position: relative;
clear: both;
margin: 0 auto;
max-width: 100%;
list-style: none;
text-align: center;
font-family:"Microsoft YaHei";
}
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 6px 6px 6px 0px;
min-width: 355px;
max-width: 355px;
max-height: 400px;
width: 48%;
height: auto;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
margin: 6px 6px 6px 0px; 这个间距无法实现，右边会多出6px。我想让四张图片的中间两张间距宽点，左右靠两边的。而不是多出6px 最近经常遇到这问题，求解决。
请直接给出可用CSS 别扯那些不着边的建议 展开
position: relative;
clear: both;
margin: 0 auto;
max-width: 100%;
list-style: none;
text-align: center;
font-family:"Microsoft YaHei";
}
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 6px 6px 6px 0px;
min-width: 355px;
max-width: 355px;
max-height: 400px;
width: 48%;
height: auto;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
margin: 6px 6px 6px 0px; 这个间距无法实现，右边会多出6px。我想让四张图片的中间两张间距宽点，左右靠两边的。而不是多出6px 最近经常遇到这问题，求解决。
请直接给出可用CSS 别扯那些不着边的建议 展开
4个回答
展开全部
<style>
*{margin:0;padding:0;}
ul{list-style-type:none;}
.grid{width:1000px;border:1px solid blue;height:45px;}
.grid ul{width:1008px;margin-left:-5px;}/*【主要】宽度要可以容纳四个盒子，可以比父盒子大，margin-left用负的清除掉左边的边距*/
.grid ul li{float:left;width:240px;margin:5px;border:1px solid red;height:32px;}
</style>
<div class="grid">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用last-child解决， 如.grid:last-child{margin-right:0}就可以去掉右边多出的6px，或者直接定义都可以的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
比如你给最后一个再加上margin-right: 0px;不就好了
追问
。。。。。。。。。。。。
追答
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.list{
margin: 50px auto;
border: 1px solid #ddd;
position: relative;
width: 1000px;
}
.list div{
display: inline-block;
padding: 20px 50px;
margin: 60px;
border: 1px solid #bbb;
}
.list div:first-child{
margin: 60px 120px 60px 0;
}
.list div:last-child{
margin: 60px 0 60px 120px;
}
</style>
</head>
<body>
<div class="list">
<div>ss</div>
<div>ss</div>
<div>ss</div>
<div>ss</div>
</div>
</body>
</html>
简单的demo
建议这个东西是给你思路，demo是给你做
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
margin: 0 auto;你用这个属性就可以了啊
追问
那就没有任何间距。
追答
你可以用内间隙，调啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
